Merge remote-tracking branch 'origin/develop' into develop

yangdelong

2021-04-09 653c004b4f44396cdb4dce04c17152c7563e37f8

Merge remote-tracking branch 'origin/develop' into develop

 .DS_Store

Binary files differ

 .gitignore

@@ -29,4 +29,4 @@
.DS_Store
package-lock.json
.idea
.dist
/dist

 package.json

@@ -16,7 +16,7 @@
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "dayjs": "^1.9.6",
    "dayjs": "^1.10.4",
    "echarts": "^4.2.1",
    "element-ui": "^2.14.1",
    "esri-leaflet": "^3.0.1",

 public/assets/.DS_Store

Binary files differ

 public/assets/images/.DS_Store

Binary files differ

 public/assets/images/map-pages/.DS_Store

Binary files differ

 public/assets/images/map-pages/icon/.DS_Store

Binary files differ

 public/assets/images/map/company.png

Binary files differ

 public/assets/images/map/company_oil.png

 public/assets/images/map/company_refining.png

 public/assets/images/map/company_sales.png

 src/.DS_Store

Binary files differ

 src/api/mapApi.js

@@ -36,6 +36,10 @@
  getWasteGasDetails (data) {
    return axios.get(mapUrl.getWasteGasDetails, data)
  },
  // 废气点小时日数据
  getWasteGasMonData (data) {
    return axios.get(mapUrl.getWasteGasMonData, data)
  },
  // 废水点
  getWasteWater (data) {
    return axios.get(mapUrl.getWasteWater, data)
@@ -48,7 +52,22 @@
  getWasteWaterMonitoringDetails (data) {
    return axios.get(mapUrl.getWasteWaterMonitoringDetails, data)
  },
  // 废水日数据和小时数据及明细表
  getQueryOnlineMonData (data) {
    return axios.get(mapUrl.getQueryOnlineMonData, data)
  },
  // 废水人工数据
  getQueryLabMonData (data) {
    return axios.get(mapUrl.getQueryLabMonData, data)
  },
  // 废水实时数据
  getDataItems (data) {
    return axios.get(mapUrl.getDataItems, data)
  },
  getCompany (data) {
    return axios.get(mapUrl.getCompany, data)
  },
  DataItems (data) {
    return axios.get(mapUrl.DataItems, data)
  }
}

 src/api/mapUrl.js

@@ -12,9 +12,14 @@

export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'
export const DataItems = $HOST + '/wasteWater/RTDB/DataItems'
export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData'

export const getWasteWater = $HOST + '/wasteWater/getWasteWater'
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring'
export const getWasteWaterMonitoringDetails = $HOST + '/wasteWater/getWasteWaterMonitoringDetails'
export const getWasteWater = $HOST + '/wasteWater/getWasteWater' // 废水点信息
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring' // 废水监测数据
export const getWasteWaterMonitoringDetails = $HOST + '/wasteWater/getWasteWaterMonitoringDetails' // 废水监测数据明细表
export const getQueryOnlineMonData = $HOST + '/wasteWater/QueryOnlineMonData' // 废水日数据小时数据及明细表数据
export const getQueryLabMonData = $HOST + '/wasteWater/QueryLabMonMonData' // 人工数据
export const getDataItems = $HOST + '/wasteWater/RTDB/DataItems' // 实时数据

export const getCompany = $HOST + '/company/getCompany'

 src/assets/.DS_Store

Binary files differ

 src/assets/css/map/_map-variable.less

@@ -6,6 +6,7 @@
@color-tool: #C0C4CC;//工具色
@color-shadow: #00fff6;//显示颜色
@background-color: rgba(0, 16, 30, .7);//背景填充色
@background-color4: rgba(0, 16, 30, .4);//背景填充色
@background-color-light: rgba(40, 50, 100, .4);//光晕
@background-color-split: rgba(0, 255, 246, .14);//分割线
@background-color-tools: #1A4951;//工具箱

 src/assets/css/map/map-panel-style.less

@@ -1,5 +1,9 @@
@import "_map-variable";

.leaflet-container,
html,body{
 // font-family: 'Microsoft YaHei';
  font: 12px/1.5 "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
/*全局设置***********/
h1, h2, h3, h4, h5, h6, ul, li, p {
  padding: 0;
@@ -242,19 +246,68 @@
}

/***************Company 图层 悬浮框样式。*********************************/
.company-bindTooltip {
  background: @background-color-split;
.company-bindTooltip{
  position: absolute;
  top:0;
  left: 0;
  display: flex;
  justify-content: center;
  justify-items: center;
  img{display: block;width: 30px;height: 30px;margin-left: -15px;margin-top: -15px}
  ul{
    width: 120px;
    margin-left: -60px;
    text-align: center;
    display: flex;
    position: absolute;
    top:20px;
    left:0;
    li{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      font-weight: 900;
      text-shadow: 0 0 4px #fff;
      color: red;
      font-size: 16px;
      height: 20px;
      line-height: 18px;
      overflow: visible;
    }
  }
}
/*.company-bindTooltip {
  //background: @background-color-split;
  background: none;
  border: none;
  color: red;
  font-size: 16px;
  font-weight: 900 !important;
  text-shadow: 0 0 5px #fff;
  //filter:Dropshadow(offx=1,offy=0,color=white)
  //Dropshadow(offx=0,offy=1,color=white)
  //Dropshadow(offx=0,offy=-1,color=white)
  //Dropshadow(offx=-1,offy=0,color=white);
  //font-size: 16px;
  box-shadow: none;
  -webkit-text-stroke: .5px #fff;
  text-shadow: 0 0 5px #fff;
  filter:Dropshadow(offx=1,offy=0,color=white)
  Dropshadow(offx=0,offy=1,color=white)
  Dropshadow(offx=0,offy=-1,color=white)
  Dropshadow(offx=-1,offy=0,color=white);
  box-shadow: none;
  -webkit-text-stroke: 0.1px #fff;
  font: 16px "Microsoft YaHei", Arial, Helvetica, sans-serif;
  ul{
    position: relative;
    li:not(:first-child){
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      font-weight: 900;
    }
    li{
      text-shadow: 0 0 4px #fff;
    }
  }
}*/
.company-bindTooltip:before{
  display: none;
}

.company-bindTooltip-hover h3 {
@@ -268,15 +321,15 @@
  list-style: none;
  margin: 0;
  padding: 0;
  width: 260px;
  display: flex;
  //width: 260px;
  //display: flex;
  flex-wrap: wrap;
}

.company-bindTooltip-hover ul li {
  margin: 0;
  padding: 3px 0;
  width: 50%;
  //width: 50%;
}

/*************** PublicTable 表格样式。*********************************/
@@ -310,6 +363,13 @@
}
.el-table tbody tr:hover>td {
  background-color:#28304d !important;
}
//修改表格高度
.el-table td {
  padding: 0!important;
  height: 30px;
  line-height: 30px;
  font-size: 0.01rem !important;
}
/***********************************************动画效果************/
.transition{
@@ -345,6 +405,7 @@
  .icon{
    width: 20px;
    margin: 0 auto;
    font-size: 20px;
  }

}
@@ -354,4 +415,8 @@
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid @background-color-split;
}
}

.el-tabs__header .is-top {

}

 src/assets/images/.DS_Store

Binary files differ

 src/assets/images/map-pages/.DS_Store

Binary files differ

 src/assets/images/map-pages/icon/.DS_Store

Binary files differ

 src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue

File was deleted

 src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue

New file
@@ -0,0 +1,397 @@
<!--  日数据  -->
<template>
    <div id="Tab">
        <div class="infomation">
            <!--            <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>-->
            <!--            <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>-->
            <!--            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>-->
            <!--            <el-tag>废气流量 : 120343.18</el-tag>-->
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
                <!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
            </el-row>
        </div>
        <div class="form-echrts">
            <div class="from-search">
                <el-row type="flex">
                    <el-col :span="14">
                        <div class="pickerMon">
                            <div class="pickerData">
                                <span> 开始时间:</span>
                                <span class="pickerTable"><el-date-picker
                                        type="datetime"
                                        v-model="value1">
                      </el-date-picker></span>
                            </div>
                            <div class="pickerData">
                                <span >结束时间:</span>
                                <span class="pickerTable">
                        <el-date-picker
                                type="datetime"
                                v-model="value2"
                        >
                      </el-date-picker>
                      </span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        采样点数:
                        <input list="source" id="ipt" class="echatsInput">
                        <datalist id="source">
                            <option value="0" />
                            <option value="25" />
                            <option value="50" />
                            <option value="75" />
                            <option value="100" />
                        </datalist>
                    </el-col>
                    <el-col class="detailbtn" :span="2" @click="onSubmit">查询</el-col>
                    <el-col :span="3">
                        <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
                        <el-dialog :visible.sync="dialogVisible"
                                   :append-to-body="true"
                                   :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
                                   width="68%"
                                   center
                                   v-dialogDrag
                        >
                            <div class="el-dialog-div" style="height: 500px">
                                <public-detailed-list v-bind="$attrs"></public-detailed-list>
                            </div>
                        </el-dialog>
                    </el-col>
                </el-row>
            </div>
            <div style="width:5rem;height:2rem;" id="echarts" ref="main">
            </div>
        </div>
    </div>
</template>

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'

export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        } else {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        }
        this.myChart.resize()
      }
    },
    initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) {
      var options = {
        title: {
          // text: '折线图堆叠'
        },
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          }
        },
        legend: {
          x: '200px',
          y: '30px',
          data: [{
            name: 'COD',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '氨氮',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '废水流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        // 图标缩放设置
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100,
          show: false,
          // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        // x轴的设置
        xAxis: {
          type: 'category',
          boundaryGap: ['10%', '10%'],
          data: dataDate,
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          },
          splitLine: { // 网格垂直线为虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          position: 'left', // 多 Y 轴使用
          name: '浓度(mg/m³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        },
        {
          type: 'value',
          position: 'right', // 多 Y 轴使用
          name: '流量(m³/h³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        }],
        series: [
          {
            name: 'COD',
            type: 'line',
            stack: '总量',
            data: dataValue1,
            yAxisIndex: 0
          },
          {
            name: '氨氮',
            type: 'line',
            stack: '总量',
            data: dataValue2,
            yAxisIndex: 0
          },
          {
            name: '废水流量',
            type: 'line',
            stack: '总量',
            data: dataValue3,
            yAxisIndex: 1
          }
        ]
      }
      return options
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse()
      console.log(dataWatch)
      var dataValue1 = []
      var dataValue2 = []
      var dataValue3 = []
      var dataDate = []
      for (var i = 0; i < 24; i++) {
        dataDate.push(dataWatch[i].MonTimeStr.substring(0, 8))
      }
      for (var n = 0; n < dataWatch.length; n++) {
        if (dataWatch[n].PoltmtrlName === 'COD') {
          dataValue1.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '氨氮') {
          dataValue2.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '废水流量') {
          dataValue3.push(dataWatch[n].MonQty)
        }
      }
      const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
  }
}
</script>

<style scoped lang="less">
    .grid-content{
        font-size: 8px!important;
        background-color:#2e4967;
        text-align: center;
        margin: 0 2px 4px 2px;
        border-radius: 2px;
    }
    .Infomation {
        margin-left: 10px;
    }

    .el-tag {
        height: 25px;
        width: 140px;
        line-height: 25px;
        margin-right: 10px;
        font-size: 10px;
        background-color: rgba(0, 255, 246, 0.14);
        color: #00d0f9;
        border: none;
        padding: 0 15px;
    }

    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
        .from-search{
            margin-top: 6px;
            .pickerMon{
                display: flex;
                .pickerData{
                    flex: 1;
                    display: flex;
                    .pickerTable{
                        margin-left: 6px;
                        width: 40px;

                        /deep/.el-input__icon {
                            width: 0.9rem;
                            font-size: 0;
                        }
                    }
                }
            }
            /deep/.el-date-editor--datetime{
                width: 100%;
            }
            /deep/.el-input__inner{
                position: relative;
                width: 0.9rem!important;
                height: 0.125rem!important;
                background-color: #2e4967;
                color: #ffffff;
                font-size: 8px;
                padding: 0;
                //padding-left:20px ;
                //padding: 0!important;
            }
            .echatsInput{
                color: #00ffff;
                background-color: #2e4967;
                border: none;
                border-radius: 6px;
                width: 40px;
            }
            .detailbtn{
                background-color:#2e4967;
                text-align: center;
                padding: 0 7px;
                line-height: 20px;
                border-radius: 4px;
                margin-right: 6px;
            }
        }
        .el-dialog-div {
            //height: 50vh!important;
            overflow: auto;
            //overflow: hidden;
        }

        #echarts {
            margin: 0;
            padding: 0;
            //height: 3rem;
            //border: 1px solid #396d83;
            //margin: 10px 10px 10px 10px;
        }
    }
</style>

 src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue

New file
@@ -0,0 +1,476 @@
<!--  小时数据  -->
<template>
    <div id="Tab">
        <div class="infomation">
<!--            <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>-->
<!--            <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>-->
<!--            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>-->
<!--            <el-tag>废气流量 : 120343.18</el-tag>-->
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
<!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
          </el-row>
        </div>
        <div class="form-echrts">
            <!--    :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName"      -->
            <div class="from-search">
<!--                <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--                    <el-form-item label="审批人">-->
<!--                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <div class="block">-->
<!--                        <el-date-picker-->
<!--                            size="'mini"-->
<!--                                class="date"-->
<!--                                v-model="value"-->
<!--                                type="datetimerange"-->
<!--                                range-separator="至"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期">-->
<!--                        </el-date-picker>-->
<!--                    </div>-->
<!--                    <el-form-item label="采样点数" class="text-size">-->
<!--                        <el-select v-model="formInline.region" placeholder="0">-->
<!--                            <el-option label="0" value="shanghai"></el-option>-->
<!--                            <el-option label="25" value="beijing"></el-option>-->
<!--                            <el-option label="50" value="beijing"></el-option>-->
<!--                            <el-option label="75" value="beijing"></el-option>-->
<!--                            <el-option label="100" value="beijing"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--                    </el-form-item>-->

<!--                </el-form>-->
              <div class="layoutFrom">
                <div class="pickerMon">
                  <div class="pickerData pickerDataLeft">
                    <span> 开始时间:</span>
                    <span class="pickerTable"><el-date-picker
                        type="datetime"
                        v-model="value1">
                      </el-date-picker></span>
                  </div>
                  <div class="pickerData">
                    <span >结束时间:</span>
                    <span class="pickerTable">
                        <el-date-picker
                            type="datetime"
                            v-model="value2"
                        >
                      </el-date-picker>
                      </span>
                  </div>
                </div>
                <div class="sampling">
                  <span>
                     采样点数:
                  </span>
                  <input list="source" id="ipt" class="echatsInput">
                  <datalist id="source">
                    <option value="0" />
                    <option value="25" />
                    <option value="50" />
                    <option value="75" />
                    <option value="100" />
                  </datalist>
                </div>
                <div class="InquiryBtn">
                  <div>查询</div>
                </div>
                <div class="detailBox">
                  <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
                  <el-dialog :visible.sync="dialogVisible"
                             :append-to-body="true"
                             :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
                             width="68%"
                             center
                             v-dialogDrag
                  >
                    <div class="el-dialog-div" style="height: 500px">
                      <public-detailed-list v-bind="$attrs"></public-detailed-list>
                    </div>
                  </el-dialog>
                </div>
              </div>
            </div>
            <div style="width:5rem;height:2rem;" id="echarts" ref="main">
            </div>
        </div>
    </div>
</template>

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'

export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      value1: '',
      value2: '',
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        } else {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        }
        this.myChart.resize()
      }
    },
    initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) {
      var options = {
        title: {
          // text: '折线图堆叠'
        },
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          }
        },
        legend: {
          x: '200px',
          y: '30px',
          data: [{
            name: 'COD',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '氨氮',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '废水流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        // 图标缩放设置
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100,
          show: false,
          // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        // x轴的设置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dataDate,
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          },
          splitLine: { // 网格垂直线为虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          position: 'left', // 多 Y 轴使用
          name: '浓度(mg/m³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        },
        {
          type: 'value',
          position: 'right', // 多 Y 轴使用
          name: '流量(m³/h³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        }],
        series: [
          {
            name: 'COD',
            type: 'line',
            stack: '总量',
            data: dataValue1,
            yAxisIndex: 0
          },
          {
            name: '氨氮',
            type: 'line',
            stack: '总量',
            data: dataValue2,
            yAxisIndex: 0
          },
          {
            name: '废水流量',
            type: 'line',
            stack: '总量',
            data: dataValue3,
            yAxisIndex: 1
          }
        ]
      }
      return options
    }
  },
  // methods: {
  //   // onSubmit () {
  //   //   console.log('submit!')
  //   // },
  //   drawChart: function () {
  //     const myChart = this.$echarts.init(this.$refs.main)
  //     myChart.setOption(this.options)
  //     window.onresize = function () {
  //       var h1 = document.documentElement.clientHeight// 获取屏幕的高度
  //       if (h1 > 700) {
  //         myChart.getDom().style.height = 3 + 'rem'
  //         myChart.getDom().style.width = 6 + 'rem'
  //       } else {
  //         myChart.getDom().style.height = 3 + 'rem'
  //         myChart.getDom().style.width = 6 + 'rem'
  //       }
  //       myChart.resize()
  //     }
  //   }
  // },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse()
      console.log(dataWatch)
      var dataValue1 = []
      var dataValue2 = []
      var dataValue3 = []
      var dataDate = []
      for (var i = 0; i < 24; i++) {
        dataDate.push(dataWatch[i].MonTimeStr.substring(9))
      }
      for (var n = 0; n < dataWatch.length; n++) {
        if (dataWatch[n].PoltmtrlName === 'COD') {
          dataValue1.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '氨氮') {
          dataValue2.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '废水流量') {
          dataValue3.push(dataWatch[n].MonQty)
        }
      }
      const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
  }
}
</script>

<style scoped lang="less">
.grid-content{
  font-size: 8px!important;
  background-color:#2e4967;
  text-align: center;
  margin: 0 2px 4px 2px;
  border-radius: 2px;
}
.Infomation {
  margin-left: 10px;
}

.el-tag {
  height: 25px;
    width: 140px;
  line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
  background-color: rgba(0, 255, 246, 0.14);
  color: #00d0f9;
  border: none;
  padding: 0 15px;
}

.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search{
    margin-top: 6px;
    .layoutFrom{
      display: flex;
       .sampling{
        margin-left: 100px;
         >span{
           margin-right: 10px;
         }
      }
      .InquiryBtn{
        margin-left: 30px;
        width: 36px;
        height: 20px;
        font-size: 8px;
        background-color:#2e4967 ;
        text-align: center;
        border-radius: 3px;
      }
      .detailBox{
        margin-left: 30px;
      }
      .pickerMon{
        display: flex;
        .pickerDataLeft{
          margin-left: 10px;
          margin-right: 90px;
        }
        .pickerData{
          flex: 1;
          display: flex;
          >span{
            margin-right: 15px;
          }
          .pickerTable{
            margin-left: 6px;
            width: 40px;

            /deep/.el-input__icon {
              width: 1rem;
              font-size: 0;
            }
          }
        }
      }
    }
    /deep/.el-input__inner{
      position: relative;
      width: 0.9rem!important;
      height: 0.125rem!important;
      background-color: #2e4967;
      color: #ffffff;
      font-size: 8px;
      padding: 0;
      //padding-left:20px ;
      //padding: 0!important;
    }
    .echatsInput{
      color: #00ffff;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 40px;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }
  }
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue

New file
@@ -0,0 +1,213 @@
<template>
  <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
</template>

<script>

import mapApi from '@/api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'

export default {
  name: 'ECharts',
  data () {
    return {
      myChart: [],
      result: [],
      days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
      value: '',
      seriesData: [],
      aseries: ''
    }
  },
  methods: {
    drawChart () {
      this.myChart = this.$echarts.init(this.$refs.echarts)

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          containLabel: false
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          // data: this.seriesData,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              // width: 1
              show: false
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }
        },
        series: [
          {
            name: '模拟数据',
            type: 'line',
            // showSymbol: false,
            // hoverAnimation: false,
            data: this.seriesData
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      this.myChart.setOption(option)
    },
    async echartsData () {
      const addDays = dayjs().add(300, 'day')
      const data = {
        $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
        $startTime: this.dayjs,
        $endTime: addDays,
        $step: 15
      }
      const result = await mapApi.DataItems(data)
      this.result = result.data
      for (let i = 0; i < result.length; i++) {
        //   // console.log(result[i])

        // const seriesData = []
        const aseries = []
        // let nameData = ''

        this.seriesData.push(result[i].ReadTime)
        aseries.push(result[i].TagValue)
        // nameData = result[i].UnionTagCode
        this.aseries = result[i].UnionTagCode
      }
      this.myChart.setOption({
        series: [{
          data: this.seriesData
        }]
      })
    },
    // 数据的请求
    requestEcharts () {
      setInterval(async () => {
        const addDays = dayjs().add(300, 'day')
        const data = {
          $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
          $startTime: this.dayjs,
          $endTime: addDays,
          $step: 15
        }
        const result = await mapApi.DataItems(data)
        this.result = result.data
        for (let i = 0; i < result.length; i++) {
          //   // console.log(result[i])

          // const seriesData = []
          const aseries = []
          // let nameData = ''

          this.seriesData.push(result[i].ReadTime)
          aseries.push(result[i].TagValue)
          // nameData = result[i].UnionTagCode
          this.aseries = result[i].UnionTagCode
        }
        this.myChart.setOption({
          series: [{
            data: this.seriesData
          }]
        })
      }, 3000)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.requestEcharts()
      this.drawChart()
      this.echartsData()
    })
  }
}
</script>

<style scoped lang="less">
.Infomation {
  margin-left: 10px;
  height: 0.2rem;
}

.el-tag {
  height: 25px;
  width: 140px;
  line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
  background-color: rgba(0, 255, 246, 0.14);
  color: #00d0f9;
  border: none;
  padding: 0 15px;
}

.form-echrts {
  width: 100%;
  height: 1rem;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue

@@ -1,36 +1,38 @@
<template>
  <div class="win">
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <ul class="tab">
      <li @click='tabTaggle("ECharts")'>实时数据</li>
      <li @click='tabTaggle("ECharts")'>小时数据</li>
      <li @click='tabTaggle("ECharts")'>日数据</li>
      <li @click='tabTaggle("ECharts")'>人工数据</li>
    </ul>
    <component :is="currentTab" v-bind="$attrs"></component>
  </div>
    <div class="win">
        <div class="border_corner border_corner_left_top"></div>
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <ul class="tab">
            <li @click='tabTaggle("ECharts")'>实时数据</li>
            <li @click='tabTaggle("EChartsHour")'>小时数据</li>
            <li @click='tabTaggle("EChartsDate")'>日数据</li>
            <li @click='tabTaggle("ECharts")'>人工数据</li>
        </ul>
        <component :is="currentTab" v-bind="$attrs"></component>
    </div>
</template>

<script>
import ECharts from './ECharts'
import EChartsHour from './EChartsHour'
import EChartsDate from './EChartsDate'

export default {
  name: 'PublicChart',
  components: {
    ECharts
    EChartsHour,
    EChartsDate
  },
  data () {
    return {
      currentTab: 'ECharts'
      currentTab: 'EChartsHour'
    }
  },
  methods: {
    tabTaggle (taggleMenu) {
      this.currentTab = taggleMenu
      debugger
      // debugger
    }
  }
}
@@ -46,10 +48,10 @@

.win {
  position: relative;
  margin-bottom: 13px;
  /*margin-bottom: 13px;*/
  background-color: rgba(33, 41, 69, 0.9);
  border: 0.8px solid #396d83;
  height: 1.5rem;
  /*height: 1.5rem;*/
}

.border_corner {

 src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue

@@ -1,29 +1,31 @@
<template>
  <div class="PublicDetailedList">
    <el-table :data="tableData" max-height="500px">
    <el-table :data="tableData" max-height="500px" border>
      <el-scrollbar style="height: 50vh">
      <el-table-column prop="OnLineMonEmissPointName" label="排放点"></el-table-column>
      <el-table-column prop="MonTimeStr" label="监测时间"></el-table-column>
      <el-table-column  label="氮氧化物">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
        <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
      </el-table-column>
      <el-table-column label="二氧化硫">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
        <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
      </el-table-column>
      <el-table-column  label="烟尘">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
        <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
      </el-table-column>
      <el-table-column  label="废气流量">
        <el-table-column prop="StdValue" label="气量"></el-table-column>
      </el-table-column>
      </el-scrollbar>
    </el-table>
  </div>
</template>

 src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue

@@ -7,8 +7,7 @@
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-table">
        <el-table :data="listData" style="width: 100%" stripe='stripe'
                  tooltip-effect="dark" :row-class-name="tableRowClassName">
        <el-table :data="listData" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
          <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                           :label="item.label"></el-table-column>
        </el-table>
@@ -84,8 +83,6 @@
.win {
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
  //width: 6rem;
  height: 1.5rem;
}

.main {

 src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue

@@ -14,7 +14,7 @@
            <el-col :span="8">生产单位:{{ setWasteGasdata.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ setWasteGasdata.MonTypeName }}</el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
          <el-row type="flex" class="row-bg row-item-two" justify="space-around">
            <el-col :span="8">排放去向:{{ setWasteGasdata.EmissDirecti }}</el-col>
            <el-col :span="18">控制级别名称:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
            <el-col :span="18">内/外排口:{{ setWasteGasdata.OrOutPortName }}</el-col>
@@ -36,7 +36,7 @@
            <el-col :span="8">生产单位:{{ setWasteWaterdata.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ setWasteWaterdata.MonTypeName }}</el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
          <el-row type="flex" class="row-bg row-item-two" justify="space-around">
            <el-col :span="8">排放去向:{{ setWasteWaterdata.EmissDirecti }}</el-col>
            <el-col :span="8">控制级别名称:{{ setWasteWaterdata.ContrLevelShowName }}</el-col>
            <el-col :span="8">内/外排口:{{ setWasteWaterdata.OrOutPortName }}</el-col>
@@ -77,7 +77,7 @@
  margin-bottom: 10px;
  background-color: rgba(33, 41, 69, 0.9);
  //width: 6rem;
  height: 0.5rem;
  //height: 0.5rem;
}

.main {
@@ -87,25 +87,31 @@
  .main-matter {
    font-size: 13px;
    font-weight: normal;
    //padding: 10px 6px;
    padding: 0 6px;
    border: 1px solid #396d83;

    .row-item-one {
      //flex-wrap: nowrap;
      overflow: hidden;
      margin-top: 6px;
      margin-bottom: 7px;
      //margin-left: 10px;
    }

    .row-item-two{
      margin-bottom: 6px;
    }
    .el-row {
      width: 100%;
      color: #00d0f9;
      display: flex;
      font-size: 12px !important;
      text-align: center;

      .el-col {
        text-align: center;
        flex: 1;
        width: 100%;
        background-color: #243a55;
        text-align: center;
        line-height: 28px;
        margin-left: 6px;
        border-radius: 4px;

@@ -122,7 +128,7 @@
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      line-height: 35px;
      line-height: 30px;

      li {
        text-align: center;

 src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue

@@ -26,12 +26,13 @@
.win {
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
  height: 2.1rem;
  //height: 2rem;
  width: 3rem;
}

.main {
  border: 1px solid #396d83;
  padding: 5px;
  //padding: 5px;
  height: 2rem;

  video {

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -1,5 +1,6 @@
<template>
  <div class="public-bounced" v-drag v-if="flag">
    <!--    <Echarts></Echarts>-->
    <div class="public-bounced-title">
      <span>{{ displayContentTitle }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
@@ -13,44 +14,21 @@
                        :displayContentTable="displayContentTable"></public-table>
          <public-chart v-else :getWasteGasDetails="getWasteGasDetails"
                        :value="value"
                        :getWasteWaterMonitoring="getWasteWaterMonitoring"
                        :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails
"></public-chart>
                        :getQueryOnlineMonData="getQueryOnlineMonData"
                        :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails">
          </public-chart>
        </div>
      </div>
      <div class="public-bounced-content-right">
        <public-video></public-video>
      </div>
    </div>
    <!--    <el-dialog-->
    <!--        :visible.sync="flag"-->
    <!--        width="70%"-->
    <!--        v-drag-->
    <!--        :modal="false">-->
    <!--      <div class="public-bounced-title">-->
    <!--        <span>{{ displayContentTitle }}</span>-->
    <!--        <i class="el-icon-circle-close" @click="closePopup"></i>-->
    <!--      </div>-->
    <!--      <div class="public-bounced-content">-->
    <!--        <div class="public-bounced-content-left">-->
    <!--          <public-tabs :displayContentTab="displayContentTab" :value="value"-->
    <!--                       :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>-->
    <!--          <div class="public-bounced-content-left-bottom">-->
    <!--            <public-table v-if="value === 'gufei'"-->
    <!--                          :displayContentTable="displayContentTable"></public-table>-->
    <!--            <public-chart v-else :getWasteGasDetails="getWasteGasDetails"-->
    <!--                          :getWasteWaterMonitoring="getWasteWaterMonitoring"></public-chart>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="public-bounced-content-right">-->
    <!--          <public-video></public-video>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>

// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'

import '@/components/BaseNav/SolidWaste/directive/dir'
import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
@@ -61,6 +39,7 @@
export default {
  name: 'PublicBounced',
  components: {
    // Echarts,
    PublicTabs,
    PublicTable,
    PublicChart,
@@ -77,7 +56,7 @@
      value: '',
      getWasteGasDetails: [],
      getWasteWaterMonitoringDetails: [],
      getWasteWaterMonitoring: []
      getQueryOnlineMonData: []
    }
  },
  methods: {
@@ -103,10 +82,10 @@
      this.flag = true
      this.value = value
    },
    setWaterData (dataWater, dataDetail, drawData, value) {
    setWaterData (dataWater, dataDetail, hourData, value) {
      this.setWasteWaterdata = dataWater
      // console.log(data)
      this.getWasteWaterMonitoring = drawData
      this.getQueryOnlineMonData = hourData
      // console.log(drawData)
      this.getWasteWaterMonitoringDetails = dataDetail
      this.displayContentTitle = dataWater.Name
@@ -119,14 +98,10 @@

<style lang="less" scoped>
.public-bounced {
  width: 10rem;
  //height: 2.6rem;
  //width: 70vw;
  //height: 30vh;
  z-index: 999;
  position: absolute;
  top: 5%;
  left: 5%;
  top: 15%;
  left: 20%;
  background-color: #002432;
  border: 1px #9fc5c8 solid;

@@ -153,17 +128,18 @@
  }

  .public-bounced-content {
    margin: 0.2rem auto !important;
    padding: 0.1rem;
    display: flex;
    //align-items: center;
    justify-content: space-around;
    //justify-content: space-around;

    .public-bounced-content-left {
      width: 6.8rem;
      //width: 4.8rem;
    }

    .public-bounced-content-right {
      width: 3rem;
      //width: 3rem;
      margin-left: 0.1rem;
    }
  }
}

 src/components/LayerController/LayerController.vue

@@ -7,7 +7,7 @@
        <!--        <span class="icon-name">图层</span>-->
      </div>
    </el-tooltip>
    <transition name="animationChange">
    <transition name="layerChange">
      <div :class="'legend-content map-background'" v-show="layerControllerVisible">
        <lc-service-layer></lc-service-layer>
        <button  @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button>
@@ -74,14 +74,27 @@
</script>

<style lang="less">
  .animationChange-enter-active, .animationChange-leave-active {

  .layerChange-enter-active {
    transform-origin: top left;
    animation: bounce-in .2s;
  }
  .layerChange-leave-active {
    transform-origin: top left;
    animation: bounce-in .2s reverse;
  }
  /*

  .layerChange-enter-active,
  .layerChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
  .layerChange-enter,
  .layerChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }
  }*/
  .float-panel.active{
    overflow: visible;
  }
@@ -234,17 +247,26 @@
    background: #0E3565;
  }
  .el-button--default{
    padding: 15px 3px;
    background:@background-color;
    padding: 0;
    background:@background-color4;
    color:@color-tool;
    position: absolute;
    top:0;
    left: 100%;
    margin-left: .02rem;
    border-radius: 0.03rem 50% 50% 0.03rem;
    top:24px;
    right:0.02rem;
    border:none;//1px solid @color-tool;
    width: 0.2rem;
    height: 0.2rem;
    text-align: center;
    line-height: 0.2rem;
    margin-top: -0.1rem;
    border-radius: 50%;
    // border-radius: 0.03rem 50% 50% 0.03rem;
  }
  .el-button--default:hover{
    background:@background-color;
    border:1px solid @color;
    box-shadow: 0 0 2px @color;
    color:@color;
  }
  .legend-content{
    width: 1.79167rem;

 src/components/LayerController/logic/Company.js

@@ -2,7 +2,7 @@
 * 固废
 */
// 区分不同类型 使用不同img
const companyImg = '/assets/images/map/company.png'
const companyImg = '/assets/images/map/company_refining.png'

const mapApi = require('../../../api/mapApi').default
const AnimalService = require('../service/AnimalService').default
@@ -28,20 +28,29 @@
      const positionY = data[i].Longitude

      var iconUrl = companyImg
      const htmls = '<div><img src="' + iconUrl + '"><ul><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li></ul></div>'
      var myIcon = L.divIcon({
        html: htmls,
        className: 'company-bindTooltip',
        iconSize: 16
      })

      const marker = L.marker([positionX, positionY], {
        icon: L.icon({
        /* icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [13, 5]
        }),
          iconAnchor: [15, 15]
        }), */
        icon: myIcon,
        test: data[i]
      })
      marker.bindTooltip(data[i].name, {
      /* const htmls = '<ul><li>' + data[i].name + '</li></ul>'
      marker.bindTooltip(htmls, {
        permanent: true,
        offset: [0, 14],
        offset: [0, 5],
        direction: 'bottom',
        className: 'company-bindTooltip'
      })
      }) */
      layer.addLayer(marker)
    }
  }

 src/components/LayerController/logic/SolidWaste.js

@@ -39,8 +39,8 @@
        totransferData: getSolidWasteData[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      layer.addLayer(marker)

 src/components/LayerController/logic/WasteGas.js

@@ -40,8 +40,8 @@
        test: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [30, 38],
          iconAnchor: [15, 19]
        })
      })
      layer.addLayer(marker)
@@ -59,6 +59,16 @@
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    // const GasOnlinedata = {
    //   onLineMonEmissPointId: 23,
    //   monItemId: 28,
    //   emissTypeld: 2,
    //   beginTime: 2020/0o4/0o6 15:13:20,
    //   endTime=2020/0o4/0o7;15:13:20,
    //   dataType:1
    // }
    // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
    // console.log(Mondata)
    const result = await mapApi.getWasteGasDetails(dataValue)
    // console.log(result.Result.DataInfo)
    const PublicBounced = window.Vue.extend(publicBounced)

 src/components/LayerController/logic/WasteWater.js

@@ -37,8 +37,8 @@
        test: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [35, 35],
          iconAnchor: [18, 18]
        })
      })
      layer.addLayer(marker)
@@ -55,12 +55,28 @@
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    const drawback = await mapApi.getWasteWaterMonitoring()
    console.log(drawback)
    const hourValue = {
      onLineMonEmissPointId: '23',
      monItemId: '28,31',
      beginTime: '2020-04-06 15:13:20',
      endTime: '2020-04-07 15:13:20',
      dataType: '2'
    }
    // const dateValue = {
    //   onLineMonEmissPointId: '23',
    //   monItemId: '28,31',
    //   beginTime: '2020-04-06 15:13:20',
    //   endTime: '2020-04-07',
    //   dataType: '1'
    // }
    const hourData = await mapApi.getQueryOnlineMonData(hourValue)
    // const dateData = await mapApi.getQueryOnlineMonData(dateValue)
    // const drawback = await mapApi.getWasteWaterMonitoring()
    // console.log(drawback)
    const result = await mapApi.getWasteWaterMonitoringDetails(dataValue)
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.setWaterData(e.layer.options.test, result.Result.DataInfo, drawback.Result.DataInfo, 'feishui')
    instance.setWaterData(e.layer.options.test, result.Result.DataInfo, hourData.Result.DataInfo, 'feishui')
    // console.log(e.layer.options.test)
    instance.$mount()
    document.body.appendChild(instance.$el)

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -4,19 +4,19 @@
        <div class="wms-panel">
            <el-scrollbar class="wms-panel-scrollbar">
                <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                    <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
                    <!-- 一级图层遍历 -->
                    <div style="padding-left:10px;padding-top:10px">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                               @change="swAllLayers(item)"/>{{ item.name }}
                    <div style="padding-left:25px;padding-top:10px;color:#fff">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }}
                    </div>
                    <div class="layerbox-item">
                    <div class="layerbox-item" v-show="item.isShow">
                        <!-- 二级图层遍历 -->
                        <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code">
                            <input type="checkbox"
                                   :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                   :checked="itm.checked"
                                   :value="itm.code"
                                   @change="swWmsLayer(itm)"/>{{ itm.name }}
                                   @change="swAllLayers(itm)"/>{{ itm.name }}
                            <!-- 三级图层遍历 -->
                            <div class="layerbox-item-3">
                                <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
@@ -24,7 +24,8 @@
                                           :name="'wmsSublayers_'+item.code+'_'+layer.code"
                                           :checked="layer.checked"
                                           :value="layer.code"
                                           @change="swWmsLayer(layer)"/>{{ layer.name }}
                                           @change="swAllLayers(layer)"/>
                                    <span :style="'color:'+layer.color">{{ layer.name }}</span>
                                </div>
                            </div>
                        </div>
@@ -37,9 +38,7 @@
</template>

<script>
import WfsHelper from '../../helpers/WfsHelper'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import AjaxUtils from '../../../utils/AjaxUtils'

export default {
  name: 'LcServiceLayer',
@@ -50,52 +49,33 @@
    }
  },
  mounted () {
    // console.log('03步骤：', this.helper)
    this.updateServiceLayerList()
  },
  methods: {
    swAllLayers (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      for (let i = 0, len = item.layers.length; i < len; ++i) {
        item.layers[i].checked = item.checked
      this.toggleLayer(item)
      this.swLayers(item.layers, item.checked)
    },
    swLayers (layers, checked) {
      if (layers) {
        for (let i = 0, len = layers.length; i < len; ++i) {
          var layer = layers[i]
          layer.checked = checked
          this.toggleLayer(layer)
          if (layer.layers) {
            this.swLayers(layer.layers, checked)
          }
        }
      }
      this.updateWms()
    },
    loadWfs () {
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName('管线点')
      wfsHelper.addEquals('pipename', '研究院01路YS000001')

      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
      })
    },
    swWmsLayer (itm) {
      itm.checked = !itm.checked
    toggleLayer (itm) {
      if (itm.checked) {
        window.layerFactory.show(itm)
      } else {
        window.layerFactory.hide(itm)
      }
      // this.updateWms()
    },
    updateServiceLayerList () {

    },
    updateWms () {
      var mapConfig = this.mapConfig
      var wmsHelper = new WfsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = window.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({ layers: layers.join(',') }, false)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  }
}
@@ -117,6 +97,23 @@
            }
            .layerbox {
                width: 100%;
                position: relative;
                .downUp{
                    position: absolute;
                    top:3px;
                    left: -2px;
                    height: 30px;
                    width: 30px;
                    text-align: center;
                    line-height: 30px;
                    cursor: pointer;
                    font-size: 20px;
                    transition: all 1.5s;
                }
                .downUp.active{
                    transform: rotate(-90deg);
                }
                .downUp:hover{font-size: 26px;font-weight: 900}
                .layerbox-item {
                    padding-left: 30px;
                    padding-top: 5px;

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -9,7 +9,7 @@
                    <div class="content">
                        <div v-for="filter in item.layers" :key="filter.code">
                            <input type="checkbox" :value="filter.code" :checked="filter.checked"
                                   @change="swSubFilter(item.url,filter)"><label
                                   @change="swAllSubFilter(filter)"><label
                                :title="filter.name">{{filter.name}}</label>
                        </div>
                    </div>
@@ -20,7 +20,6 @@
</template>

<script>
import { mapMutations } from 'vuex'
import { LayerSewersPoint } from '@src/conf/layers/LayerSewers'

export default {
@@ -43,12 +42,26 @@
    }
  },
  methods: {
    ...mapMutations([]),
    swAllSubFilter (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      // window.serviceLayerHelper.loadLayers()
      this.toggleLayer(item)
      this.swLayers(item.layers, item.checked)
    },
    swLayers (layers, checked) {
      if (layers) {
        for (let i = 0, len = layers.length; i < len; ++i) {
          var layer = layers[i]
          layer.checked = checked
          this.toggleLayer(layer)
          if (layer.layers) {
            this.swLayers(layer.layers, checked)
          }
        }
      }
    },
    // todo 还需要优化，在有多个需要子图层独立弹窗情况下无效
    // 监听上级图层存在独立弹窗的选中情况
    toggle (serviceLayers) {
      if (serviceLayers) {
        for (var i = 0; i < serviceLayers.length; i++) {
@@ -76,8 +89,7 @@
        }
      }
    },
    swSubFilter (url, item) {
      item.checked = !item.checked
    toggleLayer (item) {
      if (item.checked) {
        window.layerFactory.show(item)
      } else {

 src/components/LayerController/service/WfsLayerService.js

@@ -45,9 +45,9 @@
          fillColor: STYLES.FILL_COLOR,
          color: STYLES.COLOR,
          fillOpacity: STYLES.FILL_OPACITY,
          opacity: STYLES.OPACITY,
          dashArray: STYLES.DASH_ARRAY,
          dashSpeed: STYLES.DASH_SPPED
          opacity: STYLES.OPACITY
          // dashArray: STYLES.DASH_ARRAY,
          // dashSpeed: STYLES.DASH_SPPED
        }
      },
      pointToLayer: (geoJsonPoint, latlng) => {

 src/components/panel/BaseNavMenuItem.vue

@@ -1,59 +1,59 @@
<template>

  <div class="base-nav-menu">

    <template v-for="(item,index) in menuList">

      <template v-if="item.items && item.items.length">

        <el-submenu :index="item.index" :key="index">

          <template slot="title" v-if="item.icon">

            <img :src="item.icon" :title="item.label"/>

          </template>

          <template slot="title" v-else>{{ item.label }}</template>

          <base-nav-menu-item v-for="child in item.items" :key="child.title" :menuList='[child]'></base-nav-menu-item>

        </el-submenu>

      </template>

      <template v-else>

        <el-menu-item :index="item.index" :key="index">

          <!--          <el-radio></el-radio>-->

          {{ item.label }}

        </el-menu-item>

      </template>

    </template>

  </div>

</template>



<script>



export default {

  name: 'BaseNavMenuItem',

  data () {

    return {}

  },

  props: {

    menuList: Array

  }

}

</script>



<style lang="less" scoped>

.el-menu--popup {

  min-width: 100px;

}

.base-nav-menu {

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  outline: none;

  border: none;

  //margin-left: 20px;

  padding: 0;

  .el-menu--popup {

    min-width: 100px;

  }

}



.el-menu--horizontal {

  .el-menu--popup {

    min-width: 100px;

  }

}

</style>

<template>
  <div class="base-nav-menu">
    <template v-for="(item,index) in menuList">
      <template v-if="item.items && item.items.length">
        <el-submenu :index="item.index" :key="index">
          <template slot="title" v-if="item.icon">
            <img :src="item.icon" :title="item.label"/>
          </template>
          <template slot="title" v-else>{{ item.label }}</template>
          <base-nav-menu-item v-for="child in item.items" :key="child.title" :menuList='[child]'></base-nav-menu-item>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.index" :key="index">
          <!--          <el-radio></el-radio>-->
          {{ item.label }}
        </el-menu-item>
      </template>
    </template>
  </div>
</template>

<script>

export default {
  name: 'BaseNavMenuItem',
  data () {
    return {}
  },
  props: {
    menuList: Array
  }
}
</script>

<style lang="less" scoped>
.el-menu--popup {
  min-width: 100px;
}
.base-nav-menu {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  //margin-left: 20px;
  padding: 0;
  .el-menu--popup {
    min-width: 100px;
  }
}

.el-menu--horizontal {
  .el-menu--popup {
    min-width: 100px;
  }
}
</style>

 src/components/panel/RightSearchPanel.vue

@@ -1,49 +1,47 @@
<template>
  <div class="panel-right" v-show="isShow">
    <div class="panel-tab">
<!--      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"-->
<!--           :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">-->
<!--        <img :src="item.icon" style="width: 24px;height: 24px;"></div>-->
      <div class="container">
          <ul>
              <li style="text-align: right">
                  <button type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></button>
              </li>
          </ul>

        <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
              <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                  <li>
                      <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
                  </li>
              </el-tooltip>
        </ul>
      </div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
<!--    </div>-->

<!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
<!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </div>-->
<!--    <div class="right-control" v-if="!isCollapse"  >-->
    <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
      <div class="panel-fold-btn" @click="toggleMonitorPanel">
<!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
<!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
      </div>

      <div :class="'search-container map-background'">
        <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
          <component :title="title" :is="gcComp"></component>
        </div>
      </div>
    </div>
      <transition name="searchPanelChange">
          <div style=" display: inline-flex;">
              <div class="panel-tab">
                  <div class="container">
                      <!--  <ul>
                          <li style="text-align: right">
                              <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
                                  <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                                  <i class=" el-icon-d-arrow-left" v-else ></i>
                              </div>
                          </li>
                      </ul> -->
                      <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
                          <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                              <li>
                                  <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
                              </li>
                          </el-tooltip>
                      </ul>
                  </div>
              </div>
              <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] "  >
                  <div class="panel-fold-btn" @click="toggleMonitorPanel">
                      <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
                  </div>
                  <div :class="'search-container map-background'" v-show="selectGroup" >
                      <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default ">
                          <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                          <i class=" el-icon-d-arrow-left" v-else ></i>
                      </div>
                      <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
                          <component :title="title" :is="gcComp"></component>
                      </div>
                  </div>
              </div>
          </div>
       </transition>
      <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="搜索" placement="left" v-show="!selectGroup">
          <div :class="selectGroup === true ?'active-button':''" class="iconBtn"   @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" >
             <i class="el-icon-search icon"></i>
          </div>
      </el-tooltip> -->
  </div>
</template>

@@ -75,7 +73,8 @@
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网',
      isCollapse: true
      isCollapse: true,
      selectGroup: true
    }
  },
  computed: {},
@@ -98,9 +97,18 @@
    handleClose (done) {
      console.log(done)
    },
    setSearchPanelChange () {
      this.selectGroup = !this.selectGroup
      if (!this.selectGroup) {
        this.topicList.forEach((itm) => {
          itm.checked = false
        })
      }
    },
    selected (val) {
      // console.log(val)
      this.title = val.name
      this.selectGroup = true
      this.topicList.forEach((itm) => {
        itm.checked = val.name === itm.name
      })
@@ -180,7 +188,14 @@
</script>

<style lang="less">

    .searchPanelChange-enter-active {
        transform-origin: top right;
        animation: bounce-in .2s;
    }
    .searchPanelChange-leave-active {
        transform-origin: top right;
        animation: bounce-in .2s reverse;
    }
.search-container {
    position: relative;
    width: 1.79167rem;
@@ -247,16 +262,28 @@
  //  background-color: #061e51 !important;
  //  border: solid 1px #0e639e !important;
  //}
    .el-button--default {
        padding: 15px 3px;
        background: rgba(0, 16, 30, 0.7);
        color: #C0C4CC;
        border-radius:50%  0.03rem 0.03rem 50% ;
    .el-button--default.special-button {
        padding: 0;
        background:@background-color4;
        color:@color-tool;
        position: absolute;
        top:24px;
        right:0.02rem;
        border:none;//1px solid @color-tool;
        width: 0.2rem;
        height: 0.2rem;
        text-align: center;
        line-height: 0.2rem;
        margin-top: -0.1rem;
        border-radius: 50%;
        z-index: 999;
    }
    .el-button--default:hover{
    .el-button--default.special-button:hover{
        background:@background-color;
        border:1px solid @color;
        box-shadow: 0 0 2px @color;
        color:@color;
    }

  .el-form-item__label {
    color: rgb(52, 224, 255);
    color: @color;

 src/components/panel/ToolBoxPanel.vue

@@ -41,9 +41,9 @@
<!--            </div>-->
            <lc-base-map v-show="item.index==='2'"></lc-base-map>
          </el-popover>
          <el-button @click="changeSelect" class="special-button">
          <!-- <el-button @click="changeSelect" class="special-button">
            <i class="el-icon-d-arrow-left"></i>
          </el-button>
          </el-button> -->
        </el-row>
      </transition>
    </div>
@@ -382,12 +382,15 @@
    },
    changeSelect () {
      this.selectGroup = false
      this.isShow = !this.isShow
      this.active = -1
    },
    changeSelectMouse () {
      this.selectGroup = true
      this.isShow = []
      this.selectGroup = !this.selectGroup
      if (this.selectGroup) {
        this.isShow = []
      } else {
        this.isShow = !this.isShow
        this.active = -1
      }
    }
  }
}
@@ -489,8 +492,9 @@
      .special-button {
        width: 0.1362rem;
        height: 0.2725rem;
        color: #C0C4CC;
        border-radius: 0.03rem 50% 50% 0.03rem;
        background:@background-color4;
        color:@color-tool;
        border:1px solid @color-tool;
      }
      .special-button:hover{
        color: #00fff6;

 src/components/panel/bounced/TextBounced.vue

@@ -1,131 +1,131 @@
<template>

  <div class="bounced-box">

    <ul>

      <li>

        <form action="" class="bounced-box-title">

          <span>文字标注设置</span>

          <a @click="changeBounced()">X</a>

        </form>

      </li>

      <li>

        <form action="" class="bounced-box-content">

          <h6>内容：</h6>

          <div><textarea v-model='bouncedText' @blur="ChangeText"></textarea></div>

        </form>

      </li>

      <li class="bounced-box-choose">

        <span>颜色：</span>

        <select v-model='bouncedSelect' @click="changeLabelTextSelect()">

          <option v-for="(item,index) in selectOptions" :key="index" :value="item.value">{{ item.text }}</option>

        </select>

      </li>

    </ul>

  </div>

</template>



<script>



import MakeTation from '@components/plugin/MakeTation'



export default {

  name: 'TextBounced',

  data () {

    return {

      bouncedText: '',

      bouncedSelect: 'red',

      selectOptions: [

        {

          value: 'red',

          text: '红色'

        },

        {

          value: 'blue',

          text: '蓝色'

        },

        {

          value: 'yellow',

          text: '黄色'

        }

      ]

    }

  },

  methods: {

    changeBounced () {

      this.$emit('changeBounced', false)

    },

    changeLabelTextSelect () {

      // this.bouncedSelect = item

      console.log('获取颜色')

      MakeTation.setContentColor(this.bouncedSelect)

    },

    ChangeText () {

      MakeTation.setContentText(this.bouncedText)

      console.log(this.bouncedText)

    }

  }

}

</script>



<style lang="less" scoped>

.bounced-box {

  position: absolute;

  border: 1px solid grey;

  width: 150px;

  right: 5%;

  top: 238px;

  background-color: rgba(3, 28, 61, 0.8);

  color: white;

  cursor: default;

  left: 814px;



  ul {

    list-style: none;

    padding: 0;

    margin: 0;



    li {

      margin: 1rem 0;

    }



    .bounced-box-title {

      background-color: rgba(34, 83, 130, 0.8);

      cursor: move;

      display: flex;

      align-items: center;

      justify-content: space-around;



      a {

        color: white;

        cursor: pointer;

      }

    }



    .bounced-box-content {

      h6 {

        padding: 0;

        margin: 5px;

      }



      div {

        display: flex;

        align-items: center;

        justify-content: center;



        textarea {

          width: 90%;

          resize: none;

          outline: 0;

          border: 1px solid #a0b3d6;

          border-radius: 5px;

        }

      }

    }



    .bounced-box-choose {

      display: flex;

      align-items: center;

      justify-content: space-around;

    }

  }

}

</style>

<template>
  <div class="bounced-box">
    <ul>
      <li>
        <form action="" class="bounced-box-title">
          <span>文字标注设置</span>
          <a @click="changeBounced()">X</a>
        </form>
      </li>
      <li>
        <form action="" class="bounced-box-content">
          <h6>内容：</h6>
          <div><textarea v-model='bouncedText' @blur="ChangeText"></textarea></div>
        </form>
      </li>
      <li class="bounced-box-choose">
        <span>颜色：</span>
        <select v-model='bouncedSelect' @click="changeLabelTextSelect()">
          <option v-for="(item,index) in selectOptions" :key="index" :value="item.value">{{ item.text }}</option>
        </select>
      </li>
    </ul>
  </div>
</template>

<script>

import MakeTation from '@components/plugin/MakeTation'

export default {
  name: 'TextBounced',
  data () {
    return {
      bouncedText: '',
      bouncedSelect: 'red',
      selectOptions: [
        {
          value: 'red',
          text: '红色'
        },
        {
          value: 'blue',
          text: '蓝色'
        },
        {
          value: 'yellow',
          text: '黄色'
        }
      ]
    }
  },
  methods: {
    changeBounced () {
      this.$emit('changeBounced', false)
    },
    changeLabelTextSelect () {
      // this.bouncedSelect = item
      console.log('获取颜色')
      MakeTation.setContentColor(this.bouncedSelect)
    },
    ChangeText () {
      MakeTation.setContentText(this.bouncedText)
      console.log(this.bouncedText)
    }
  }
}
</script>

<style lang="less" scoped>
.bounced-box {
  position: absolute;
  border: 1px solid grey;
  width: 150px;
  right: 5%;
  top: 238px;
  background-color: rgba(3, 28, 61, 0.8);
  color: white;
  cursor: default;
  left: 814px;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      margin: 1rem 0;
    }

    .bounced-box-title {
      background-color: rgba(34, 83, 130, 0.8);
      cursor: move;
      display: flex;
      align-items: center;
      justify-content: space-around;

      a {
        color: white;
        cursor: pointer;
      }
    }

    .bounced-box-content {
      h6 {
        padding: 0;
        margin: 5px;
      }

      div {
        display: flex;
        align-items: center;
        justify-content: center;

        textarea {
          width: 90%;
          resize: none;
          outline: 0;
          border: 1px solid #a0b3d6;
          border-radius: 5px;
        }
      }
    }

    .bounced-box-choose {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>

 src/components/plugin/DownLoad.js

@@ -1,705 +1,705 @@
/* eslint-disable */

const init = (L) => {

  !function (t, e) {

    'object' == typeof exports && 'undefined' != typeof module ? e() : 'function' == typeof define && define.amd ? define(e) : e()

  }(0, function () {

    'use strict'



    function t (t, e) {

      return e = { exports: {} }, t(e, e.exports), e.exports

    }



    var e = 'undefined' != typeof window ? window : 'undefined' != typeof global ? global : 'undefined' != typeof self ? self : {},

      n = t(function (t) {

        !function (e) {

          function n (t, e) {

            function n (t) {

              return e.bgcolor && (t.style.backgroundColor = e.bgcolor), e.width && (t.style.width = e.width + 'px'), e.height && (t.style.height = e.height + 'px'), e.style && Object.keys(e.style).forEach(function (n) {

                t.style[n] = e.style[n]

              }), t

            }



            return e = e || {}, s(e), Promise.resolve(t).then(function (t) {

              return u(t, e.filter, !0)

            }).then(c).then(d).then(n).then(function (n) {

              return g(n, e.width || h.width(t), e.height || h.height(t))

            })

          }



          function i (t, e) {

            return l(t, e || {}).then(function (e) {

              return e.getContext('2d').getImageData(0, 0, h.width(t), h.height(t)).data

            })

          }



          function o (t, e) {

            return l(t, e || {}).then(function (t) {

              return t.toDataURL()

            })

          }



          function r (t, e) {

            return e = e || {}, l(t, e).then(function (t) {

              return t.toDataURL('image/jpeg', e.quality || 1)

            })

          }



          function a (t, e) {

            return l(t, e || {}).then(h.canvasToBlob)

          }



          function s (t) {

            void 0 === t.imagePlaceholder ? w.impl.options.imagePlaceholder = M.imagePlaceholder : w.impl.options.imagePlaceholder = t.imagePlaceholder, void 0 === t.cacheBust ? w.impl.options.cacheBust = M.cacheBust : w.impl.options.cacheBust = t.cacheBust

          }



          function l (t, e) {

            function i (t) {

              var n = document.createElement('canvas')

              if (n.width = e.width || h.width(t), n.height = e.height || h.height(t), e.bgcolor) {

                var i = n.getContext('2d')

                i.fillStyle = e.bgcolor, i.fillRect(0, 0, n.width, n.height)

              }

              return n

            }



            return n(t, e).then(h.makeImage).then(h.delay(100)).then(function (e) {

              var n = i(t)

              return n.getContext('2d').drawImage(e, 0, 0), n

            })

          }



          function u (t, e, n) {

            function i (t) {

              return t instanceof HTMLCanvasElement ? h.makeImage(t.toDataURL()) : t.cloneNode(!1)

            }



            function o (t, e, n) {

              var i = t.childNodes

              return 0 === i.length ? Promise.resolve(e) : function (t, e, n) {

                var i = Promise.resolve()

                return e.forEach(function (e) {

                  i = i.then(function () {

                    return u(e, n)

                  }).then(function (e) {

                    e && t.appendChild(e)

                  })

                }), i

              }(e, h.asArray(i), n).then(function () {

                return e

              })

            }



            function r (t, e) {

              function n () {

                !function (t, e) {

                  t.cssText ? e.cssText = t.cssText : function (t, e) {

                    h.asArray(t).forEach(function (n) {

                      e.setProperty(n, t.getPropertyValue(n), t.getPropertyPriority(n))

                    })

                  }(t, e)

                }(window.getComputedStyle(t), e.style)

              }



              function i () {

                function n (n) {

                  var i = window.getComputedStyle(t, n), o = i.getPropertyValue('content')

                  if ('' !== o && 'none' !== o) {

                    var r = h.uid()

                    e.className = e.className + ' ' + r

                    var a = document.createElement('style')

                    a.appendChild(function (t, e, n) {

                      var i = '.' + t + ':' + e, o = n.cssText ? function (t) {

                        var e = t.getPropertyValue('content')

                        return t.cssText + ' content: ' + e + ';'

                      }(n) : function (t) {

                        function e (e) {

                          return e + ': ' + t.getPropertyValue(e) + (t.getPropertyPriority(e) ? ' !important' : '')

                        }



                        return h.asArray(t).map(e).join('; ') + ';'

                      }(n)

                      return document.createTextNode(i + '{' + o + '}')

                    }(r, n, i)), e.appendChild(a)

                  }

                }



                [':before', ':after'].forEach(function (t) {

                  n(t)

                })

              }



              function o () {

                t instanceof HTMLTextAreaElement && (e.innerHTML = t.value), t instanceof HTMLInputElement && e.setAttribute('value', t.value)

              }



              function r () {

                e instanceof SVGElement && (e.setAttribute('xmlns', 'http://www.w3.org/2000/svg'), e instanceof SVGRectElement && ['width', 'height'].forEach(function (t) {

                  var n = e.getAttribute(t)

                  n && e.style.setProperty(t, n)

                }))

              }



              return e instanceof Element ? Promise.resolve().then(n).then(i).then(o).then(r).then(function () {

                return e

              }) : e

            }



            return n || !e || e(t) ? Promise.resolve(t).then(i).then(function (n) {

              return o(t, n, e)

            }).then(function (e) {

              return r(t, e)

            }) : Promise.resolve()

          }



          function c (t) {

            return p.resolveAll().then(function (e) {

              var n = document.createElement('style')

              return t.appendChild(n), n.appendChild(document.createTextNode(e)), t

            })

          }



          function d (t) {

            return f.inlineAll(t).then(function () {

              return t

            })

          }



          function g (t, e, n) {

            return Promise.resolve(t).then(function (t) {

              return t.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'), (new XMLSerializer).serializeToString(t)

            }).then(h.escapeXhtml).then(function (t) {

              return '<foreignObject x="0" y="0" width="100%" height="100%">' + t + '</foreignObject>'

            }).then(function (t) {

              return '<svg xmlns="http://www.w3.org/2000/svg" width="' + e + '" height="' + n + '">' + t + '</svg>'

            }).then(function (t) {

              return 'data:image/svg+xml;charset=utf-8,' + t

            })

          }



          var h = function () {

            function t () {

              var t = 'application/font-woff', e = 'image/jpeg'

              return {

                woff: t,

                woff2: t,

                ttf: 'application/font-truetype',

                eot: 'application/vnd.ms-fontobject',

                png: 'image/png',

                jpg: e,

                jpeg: e,

                gif: 'image/gif',

                tiff: 'image/tiff',

                svg: 'image/svg+xml'

              }

            }



            function e (t) {

              var e = /\.([^\.\/]*?)$/g.exec(t)

              return e ? e[1] : ''

            }



            function n (n) {

              var i = e(n).toLowerCase()

              return t()[i] || ''

            }



            function i (t) {

              return -1 !== t.search(/^(data:)/)

            }



            function o (t) {

              return new Promise(function (e) {

                for (var n = window.atob(t.toDataURL().split(',')[1]), i = n.length, o = new Uint8Array(i), r = 0; r < i; r++) o[r] = n.charCodeAt(r)

                e(new Blob([o], { type: 'image/png' }))

              })

            }



            function r (t) {

              return t.toBlob ? new Promise(function (e) {

                t.toBlob(e)

              }) : o(t)

            }



            function a (t, e) {

              var n = document.implementation.createHTMLDocument(), i = n.createElement('base')

              n.head.appendChild(i)

              var o = n.createElement('a')

              return n.body.appendChild(o), i.href = e, o.href = t, o.href

            }



            function s (t) {

              return new Promise(function (e, n) {

                var i = new Image

                i.onload = function () {

                  e(i)

                }, i.onerror = n, i.src = t

              })

            }



            function l (t) {

              var e = 3e4

              return w.impl.options.cacheBust && (t += (/\?/.test(t) ? '&' : '?') + (new Date).getTime()), new Promise(function (n) {

                function i () {

                  if (4 === a.readyState) {

                    if (200 !== a.status) return void (s ? n(s) : r('cannot fetch resource: ' + t + ', status: ' + a.status))

                    var e = new FileReader

                    e.onloadend = function () {

                      var t = e.result.split(/,/)[1]

                      n(t)

                    }, e.readAsDataURL(a.response)

                  }

                }



                function o () {

                  s ? n(s) : r('timeout of ' + e + 'ms occured while fetching resource: ' + t)

                }



                function r (t) {

                  console.error(t), n('')

                }



                var a = new XMLHttpRequest

                a.onreadystatechange = i, a.ontimeout = o, a.responseType = 'blob', a.timeout = e, a.open('GET', t, !0), a.send()

                var s

                if (w.impl.options.imagePlaceholder) {

                  var l = w.impl.options.imagePlaceholder.split(/,/)

                  l && l[1] && (s = l[1])

                }

              })

            }



            function u (t, e) {

              return 'data:' + e + ';base64,' + t

            }



            function c (t) {

              return t.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1')

            }



            function d (t) {

              return function (e) {

                return new Promise(function (n) {

                  setTimeout(function () {

                    n(e)

                  }, t)

                })

              }

            }



            function g (t) {

              for (var e = [], n = t.length, i = 0; i < n; i++) e.push(t[i])

              return e

            }



            function h (t) {

              return t.replace(/#/g, '%23').replace(/\n/g, '%0A')

            }



            function m (t) {

              var e = f(t, 'border-left-width'), n = f(t, 'border-right-width')

              return t.scrollWidth + e + n

            }



            function p (t) {

              var e = f(t, 'border-top-width'), n = f(t, 'border-bottom-width')

              return t.scrollHeight + e + n

            }



            function f (t, e) {

              var n = window.getComputedStyle(t).getPropertyValue(e)

              return parseFloat(n.replace('px', ''))

            }



            return {

              escape: c,

              parseExtension: e,

              mimeType: n,

              dataAsUrl: u,

              isDataUrl: i,

              canvasToBlob: r,

              resolveUrl: a,

              getAndEncode: l,

              uid: function () {

                var t = 0

                return function () {

                  return 'u' + function () {

                    return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)

                  }() + t++

                }

              }(),

              delay: d,

              asArray: g,

              escapeXhtml: h,

              makeImage: s,

              width: m,

              height: p

            }

          }(), m = function () {

            function t (t) {

              return -1 !== t.search(o)

            }



            function e (t) {

              for (var e, n = []; null !== (e = o.exec(t));) n.push(e[1])

              return n.filter(function (t) {

                return !h.isDataUrl(t)

              })

            }



            function n (t, e, n, i) {

              function o (t) {

                return new RegExp('(url\\([\'"]?)(' + h.escape(t) + ')([\'"]?\\))', 'g')

              }



              return Promise.resolve(e).then(function (t) {

                return n ? h.resolveUrl(t, n) : t

              }).then(i || h.getAndEncode).then(function (t) {

                return h.dataAsUrl(t, h.mimeType(e))

              }).then(function (n) {

                return t.replace(o(e), '$1' + n + '$3')

              })

            }



            function i (i, o, r) {

              return function () {

                return !t(i)

              }() ? Promise.resolve(i) : Promise.resolve(i).then(e).then(function (t) {

                var e = Promise.resolve(i)

                return t.forEach(function (t) {

                  e = e.then(function (e) {

                    return n(e, t, o, r)

                  })

                }), e

              })

            }



            var o = /url\(['"]?([^'"]+?)['"]?\)/g

            return {

              inlineAll: i,

              shouldProcess: t,

              impl: {

                readUrls: e,

                inline: n

              }

            }

          }(), p = function () {

            function t () {

              return e(document).then(function (t) {

                return Promise.all(t.map(function (t) {

                  return t.resolve()

                }))

              }).then(function (t) {

                return t.join('\n')

              })

            }



            function e () {

              function t (t) {

                return t.filter(function (t) {

                  return t.type === CSSRule.FONT_FACE_RULE

                }).filter(function (t) {

                  return m.shouldProcess(t.style.getPropertyValue('src'))

                })

              }



              function e (t) {

                var e = []

                return t.forEach(function (t) {

                  try {

                    h.asArray(t.cssRules || []).forEach(e.push.bind(e))

                  } catch (e) {

                    console.log('Error while reading CSS rules from ' + t.href, e.toString())

                  }

                }), e

              }



              function n (t) {

                return {

                  resolve: function () {

                    var e = (t.parentStyleSheet || {}).href

                    return m.inlineAll(t.cssText, e)

                  },

                  src: function () {

                    return t.style.getPropertyValue('src')

                  }

                }

              }



              return Promise.resolve(h.asArray(document.styleSheets)).then(e).then(t).then(function (t) {

                return t.map(n)

              })

            }



            return {

              resolveAll: t,

              impl: { readAll: e }

            }

          }(), f = function () {

            function t (t) {

              function e (e) {

                return h.isDataUrl(t.src) ? Promise.resolve() : Promise.resolve(t.src).then(e || h.getAndEncode).then(function (e) {

                  return h.dataAsUrl(e, h.mimeType(t.src))

                }).then(function (e) {

                  return new Promise(function (n, i) {

                    t.onload = n, t.onerror = i, t.src = e

                  })

                })

              }



              return { inline: e }

            }



            function e (n) {

              return n instanceof Element ? function (t) {

                var e = t.style.getPropertyValue('background')

                return e ? m.inlineAll(e).then(function (e) {

                  t.style.setProperty('background', e, t.style.getPropertyPriority('background'))

                }).then(function () {

                  return t

                }) : Promise.resolve(t)

              }(n).then(function () {

                return n instanceof HTMLImageElement ? t(n).inline() : Promise.all(h.asArray(n.childNodes).map(function (t) {

                  return e(t)

                }))

              }) : Promise.resolve(n)

            }



            return {

              inlineAll: e,

              impl: { newImage: t }

            }

          }(), M = {

            imagePlaceholder: void 0,

            cacheBust: !1

          }, w = {

            toSvg: n,

            toPng: o,

            toJpeg: r,

            toBlob: a,

            toPixelData: i,

            impl: {

              fontFaces: p,

              images: f,

              util: h,

              inliner: m,

              options: {}

            }

          }

          t.exports = w

        }()

      }), i = t(function (t) {

        var n = n || function (t) {

          if (!(void 0 === t || 'undefined' != typeof navigator && /MSIE [1-9]\./.test(navigator.userAgent))) {

            var e = t.document, n = function () {

                return t.URL || t.webkitURL || t

              }, i = e.createElementNS('http://www.w3.org/1999/xhtml', 'a'), o = 'download' in i, r = function (t) {

                var e = new MouseEvent('click')

                t.dispatchEvent(e)

              }, a = /constructor/i.test(t.HTMLElement) || t.safari, s = /CriOS\/[\d]+/.test(navigator.userAgent),

              l = function (e) {

                (t.setImmediate || t.setTimeout)(function () {

                  throw e

                }, 0)

              }, u = function (t) {

                var e = function () {

                  'string' == typeof t ? n().revokeObjectURL(t) : t.remove()

                }

                setTimeout(e, 4e4)

              }, c = function (t, e, n) {

                e = [].concat(e)

                for (var i = e.length; i--;) {

                  var o = t['on' + e[i]]

                  if ('function' == typeof o) {

                    try {

                      o.call(t, n || t)

                    } catch (t) {

                      l(t)

                    }

                  }

                }

              }, d = function (t) {

                return /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(t.type) ? new Blob([String.fromCharCode(65279), t], { type: t.type }) : t

              }, g = function (e, l, g) {

                g || (e = d(e))

                var h, m = this, p = e.type, f = 'application/octet-stream' === p, M = function () {

                  c(m, 'writestart progress write writeend'.split(' '))

                }

                if (m.readyState = m.INIT, o) {

                  return h = n().createObjectURL(e), void setTimeout(function () {

                    i.href = h, i.download = l, r(i), M(), u(h), m.readyState = m.DONE

                  })

                }

                !function () {

                  if ((s || f && a) && t.FileReader) {

                    var i = new FileReader

                    return i.onloadend = function () {

                      var e = s ? i.result : i.result.replace(/^data:[^;]*;/, 'data:attachment/file;')

                      t.open(e, '_blank') || (t.location.href = e), e = void 0, m.readyState = m.DONE, M()

                    }, i.readAsDataURL(e), void (m.readyState = m.INIT)

                  }

                  if (h || (h = n().createObjectURL(e)), f) {

                    t.location.href = h

                  } else {

                    t.open(h, '_blank') || (t.location.href = h)

                  }

                  m.readyState = m.DONE, M(), u(h)

                }()

              }, h = g.prototype, m = function (t, e, n) {

                return new g(t, e || t.name || 'download', n)

              }

            return 'undefined' != typeof navigator && navigator.msSaveOrOpenBlob ? function (t, e, n) {

              return e = e || t.name || 'download', n || (t = d(t)), navigator.msSaveOrOpenBlob(t, e)

            } : (h.abort = function () {

            }, h.readyState = h.INIT = 0, h.WRITING = 1, h.DONE = 2, h.error = h.onwritestart = h.onprogress = h.onwrite = h.onabort = h.onerror = h.onwriteend = null, m)

          }

        }('undefined' != typeof self && self || 'undefined' != typeof window && window || e.content)

        t.exports && (t.exports.saveAs = n)

      })

    L.Control.EasyPrint = L.Control.extend({

      options: {

        title: 'Print map',

        position: 'topleft',

        sizeModes: ['Current'],

        filename: 'map',

        exportOnly: !1,

        hidden: !1,

        tileWait: 500,

        hideControlContainer: !0,

        customWindowTitle: window.document.title,

        spinnerBgCOlor: '#0DC5C1',

        customSpinnerClass: 'epLoader',

        defaultSizeTitles: {

          Current: 'Current Size',

          A4Landscape: 'A4 Landscape',

          A4Portrait: 'A4 Portrait'

        }

      },

      onAdd: function () {

        this.mapContainer = this._map.getContainer(), this.options.sizeModes = this.options.sizeModes.map(function (t) {

          return 'Current' === t ? {

            name: this.options.defaultSizeTitles.Current,

            className: 'CurrentSize'

          } : 'A4Landscape' === t ? {

            height: this._a4PageSize.height,

            width: this._a4PageSize.width,

            name: this.options.defaultSizeTitles.A4Landscape,

            className: 'A4Landscape page'

          } : 'A4Portrait' === t ? {

            height: this._a4PageSize.width,

            width: this._a4PageSize.height,

            name: this.options.defaultSizeTitles.A4Portrait,

            className: 'A4Portrait page'

          } : t

        }, this)

        var t = L.DomUtil.create('div', 'leaflet-control-easyPrint leaflet-bar leaflet-control')

        if (!this.options.hidden) {

          this._addCss(), L.DomEvent.addListener(t, 'mouseover', this._togglePageSizeButtons, this), L.DomEvent.addListener(t, 'mouseout', this._togglePageSizeButtons, this)

          var e = 'leaflet-control-easyPrint-button'

          this.options.exportOnly && (e += '-export'), this.link = L.DomUtil.create('a', e, t), this.link.id = 'leafletEasyPrint', this.link.title = this.options.title, this.holder = L.DomUtil.create('ul', 'easyPrintHolder', t), this.options.sizeModes.forEach(function (t) {

            var e = L.DomUtil.create('li', 'easyPrintSizeMode', this.holder)

            e.title = t.name

            L.DomUtil.create('a', t.className, e)

            L.DomEvent.addListener(e, 'click', this.printMap, this)

          }, this), L.DomEvent.disableClickPropagation(t)

        }

        return t

      },

      printMap: function (t, e) {

        e && (this.options.filename = e), this.options.exportOnly || (this._page = window.open('', '_blank', 'toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,left=10, top=10, width=200, height=250, visible=none'), this._page.document.write(this._createSpinner(this.options.customWindowTitle, this.options.customSpinnerClass, this.options.spinnerBgCOlor))), this.originalState = {

          mapWidth: this.mapContainer.style.width,

          widthWasAuto: !1,

          widthWasPercentage: !1,

          mapHeight: this.mapContainer.style.height,

          zoom: this._map.getZoom(),

          center: this._map.getCenter()

        }, 'auto' === this.originalState.mapWidth ? (this.originalState.mapWidth = this._map.getSize().x + 'px', this.originalState.widthWasAuto = !0) : this.originalState.mapWidth.includes('%') && (this.originalState.percentageWidth = this.originalState.mapWidth, this.originalState.widthWasPercentage = !0, this.originalState.mapWidth = this._map.getSize().x + 'px'), this._map.fire('easyPrint-start', { event: t }), this.options.hidden || this._togglePageSizeButtons({ type: null }), this.options.hideControlContainer && this._toggleControls()

        var n = 'string' != typeof t ? t.target.className : t

        if ('CurrentSize' === n) return this._printOpertion(n)

        this.outerContainer = this._createOuterContainer(this.mapContainer), this.originalState.widthWasAuto && (this.outerContainer.style.width = this.originalState.mapWidth), this._createImagePlaceholder(n)

      },

      _createImagePlaceholder: function (t) {

        var e = this

        n.toPng(this.mapContainer, {

          width: parseInt(this.originalState.mapWidth.replace('px')),

          height: parseInt(this.originalState.mapHeight.replace('px'))

        }).then(function (n) {

          e.blankDiv = document.createElement('div')

          var i = e.blankDiv

          e.outerContainer.parentElement.insertBefore(i, e.outerContainer), i.className = 'epHolder', i.style.backgroundImage = 'url("' + n + '")', i.style.position = 'absolute', i.style.zIndex = 1011, i.style.display = 'initial', i.style.width = e.originalState.mapWidth, i.style.height = e.originalState.mapHeight, e._resizeAndPrintMap(t)

        }).catch(function (t) {

          console.error('oops, something went wrong!', t)

        })

      },

      _resizeAndPrintMap: function (t) {

        this.outerContainer.style.opacity = 0

        var e = this.options.sizeModes.filter(function (e) {

          return e.className === t

        })

        e = e[0], this.mapContainer.style.width = e.width + 'px', this.mapContainer.style.height = e.height + 'px', this.mapContainer.style.width > this.mapContainer.style.height ? this.orientation = 'portrait' : this.orientation = 'landscape', this._map.setView(this.originalState.center), this._map.setZoom(this.originalState.zoom), this._map.invalidateSize(), this.options.tileLayer ? this._pausePrint(t) : this._printOpertion(t)

      },

      _pausePrint: function (t) {

        var e = this, n = setInterval(function () {

          e.options.tileLayer.isLoading() || (clearInterval(n), e._printOpertion(t))

        }, e.options.tileWait)

      },

      _printOpertion: function (t) {

        var e = this, o = this.mapContainer.style.width;

        (this.originalState.widthWasAuto && 'CurrentSize' === t || this.originalState.widthWasPercentage && 'CurrentSize' === t) && (o = this.originalState.mapWidth), n.toPng(e.mapContainer, {

          width: parseInt(o),

          height: parseInt(e.mapContainer.style.height.replace('px'))

        }).then(function (t) {

          var n = e._dataURItoBlob(t)

          e.options.exportOnly ? i.saveAs(n, e.options.filename + '.png') : e._sendToBrowserPrint(t, e.orientation), e._toggleControls(!0), e.outerContainer && (e.originalState.widthWasAuto ? e.mapContainer.style.width = 'auto' : e.originalState.widthWasPercentage ? e.mapContainer.style.width = e.originalState.percentageWidth : e.mapContainer.style.width = e.originalState.mapWidth, e.mapContainer.style.height = e.originalState.mapHeight, e._removeOuterContainer(e.mapContainer, e.outerContainer, e.blankDiv), e._map.invalidateSize(), e._map.setView(e.originalState.center), e._map.setZoom(e.originalState.zoom)), e._map.fire('easyPrint-finished')

        }).catch(function (t) {

          console.error('Print operation failed', t)

        })

      },

      _sendToBrowserPrint: function (t, e) {

        this._page.resizeTo(600, 800)

        var n = this._createNewWindow(t, e, this)

        this._page.document.body.innerHTML = '', this._page.document.write(n), this._page.document.close()

      },

      _createSpinner: function (t, e, n) {

        return '<html><head><title>' + t + '</title></head><body><style>\n      body{\n        background: ' + n + ';\n      }\n      .epLoader,\n      .epLoader:before,\n      .epLoader:after {\n        border-radius: 50%;\n      }\n      .epLoader {\n        color: #ffffff;\n        font-size: 11px;\n        text-indent: -99999em;\n        margin: 55px auto;\n        position: relative;\n        width: 10em;\n        height: 10em;\n        box-shadow: inset 0 0 0 1em;\n        -webkit-transform: translateZ(0);\n        -ms-transform: translateZ(0);\n        transform: translateZ(0);\n      }\n      .epLoader:before,\n      .epLoader:after {\n        position: absolute;\n        content: \'\';\n      }\n      .epLoader:before {\n        width: 5.2em;\n        height: 10.2em;\n        background: #0dc5c1;\n        border-radius: 10.2em 0 0 10.2em;\n        top: -0.1em;\n        left: -0.1em;\n        -webkit-transform-origin: 5.2em 5.1em;\n        transform-origin: 5.2em 5.1em;\n        -webkit-animation: load2 2s infinite ease 1.5s;\n        animation: load2 2s infinite ease 1.5s;\n      }\n      .epLoader:after {\n        width: 5.2em;\n        height: 10.2em;\n        background: #0dc5c1;\n        border-radius: 0 10.2em 10.2em 0;\n        top: -0.1em;\n        left: 5.1em;\n        -webkit-transform-origin: 0px 5.1em;\n        transform-origin: 0px 5.1em;\n        -webkit-animation: load2 2s infinite ease;\n        animation: load2 2s infinite ease;\n      }\n      @-webkit-keyframes load2 {\n        0% {\n          -webkit-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n      @keyframes load2 {\n        0% {\n          -webkit-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n      </style>\n    <div class="' + e + '">Loading...</div></body></html>'

      },

      _createNewWindow: function (t, e, n) {

        return '<html><head>\n        <style>@media print {\n          img { max-width: 98%!important; max-height: 98%!important; }\n          @page { size: ' + e + ';}}\n        </style>\n        <script>function step1(){\n        setTimeout(\'step2()\', 10);}\n        function step2(){window.print();window.close()}\n        <\/script></head><body onload=\'step1()\'>\n        <img src="' + t + '" style="display:block; margin:auto;"></body></html>'

      },

      _createOuterContainer: function (t) {

        var e = document.createElement('div')

        return t.parentNode.insertBefore(e, t), t.parentNode.removeChild(t), e.appendChild(t), e.style.width = t.style.width, e.style.height = t.style.height, e.style.display = 'inline-block', e.style.overflow = 'hidden', e

      },

      _removeOuterContainer: function (t, e, n) {

        e.parentNode && (e.parentNode.insertBefore(t, e), e.parentNode.removeChild(n), e.parentNode.removeChild(e))

      },

      _addCss: function () {

        var t = document.createElement('style')

        t.type = 'text/css', t.innerHTML = '.leaflet-control-easyPrint-button { \n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMTI4LDMyaDI1NnY2NEgxMjhWMzJ6IE00ODAsMTI4SDMyYy0xNy42LDAtMzIsMTQuNC0zMiwzMnYxNjBjMCwxNy42LDE0LjM5OCwzMiwzMiwzMmg5NnYxMjhoMjU2VjM1Mmg5NiAgIGMxNy42LDAsMzItMTQuNCwzMi0zMlYxNjBDNTEyLDE0Mi40LDQ5Ny42LDEyOCw0ODAsMTI4eiBNMzUyLDQ0OEgxNjBWMjg4aDE5MlY0NDh6IE00ODcuMTk5LDE3NmMwLDEyLjgxMy0xMC4zODcsMjMuMi0yMy4xOTcsMjMuMiAgIGMtMTIuODEyLDAtMjMuMjAxLTEwLjM4Ny0yMy4yMDEtMjMuMnMxMC4zODktMjMuMiwyMy4xOTktMjMuMkM0NzYuODE0LDE1Mi44LDQ4Ny4xOTksMTYzLjE4Nyw0ODcuMTk5LDE3NnoiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);\n      background-size: 16px 16px; \n      cursor: pointer; \n    }\n    .leaflet-control-easyPrint-button-export { \n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQzMy41IDQzMy41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MzMuNSA0MzMuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJmaWxlLWRvd25sb2FkIj4KCQk8cGF0aCBkPSJNMzk1LjI1LDE1M2gtMTAyVjBoLTE1M3YxNTNoLTEwMmwxNzguNSwxNzguNUwzOTUuMjUsMTUzeiBNMzguMjUsMzgyLjV2NTFoMzU3di01MUgzOC4yNXoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);\n      background-size: 16px 16px; \n      cursor: pointer; \n    }\n    .easyPrintHolder a {\n      background-size: 16px 16px;\n      cursor: pointer;\n    }\n    .easyPrintHolder .CurrentSize{\n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZweCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPgogIDxnPgogICAgPGcgZmlsbD0iIzFEMUQxQiI+CiAgICAgIDxwYXRoIGQ9Ik0yNS4yNTUsMzUuOTA1TDQuMDE2LDU3LjE0NVY0Ni41OWMwLTEuMTA4LTAuODk3LTIuMDA4LTIuMDA4LTIuMDA4QzAuODk4LDQ0LjU4MiwwLDQ1LjQ4MSwwLDQ2LjU5djE1LjQwMiAgICBjMCwwLjI2MSwwLjA1MywwLjUyMSwwLjE1NSwwLjc2N2MwLjIwMywwLjQ5MiwwLjU5NCwwLjg4MiwxLjA4NiwxLjA4N0MxLjQ4Niw2My45NDcsMS43NDcsNjQsMi4wMDgsNjRoMTUuNDAzICAgIGMxLjEwOSwwLDIuMDA4LTAuODk4LDIuMDA4LTIuMDA4cy0wLjg5OC0yLjAwOC0yLjAwOC0yLjAwOEg2Ljg1NWwyMS4yMzgtMjEuMjRjMC43ODQtMC43ODQsMC43ODQtMi4wNTUsMC0yLjgzOSAgICBTMjYuMDM5LDM1LjEyMSwyNS4yNTUsMzUuOTA1eiIgZmlsbD0iIzAwMDAwMCIvPgogICAgICA8cGF0aCBkPSJtNjMuODQ1LDEuMjQxYy0wLjIwMy0wLjQ5MS0wLjU5NC0wLjg4Mi0xLjA4Ni0xLjA4Ny0wLjI0NS0wLjEwMS0wLjUwNi0wLjE1NC0wLjc2Ny0wLjE1NGgtMTUuNDAzYy0xLjEwOSwwLTIuMDA4LDAuODk4LTIuMDA4LDIuMDA4czAuODk4LDIuMDA4IDIuMDA4LDIuMDA4aDEwLjU1NmwtMjEuMjM4LDIxLjI0Yy0wLjc4NCwwLjc4NC0wLjc4NCwyLjA1NSAwLDIuODM5IDAuMzkyLDAuMzkyIDAuOTA2LDAuNTg5IDEuNDIsMC41ODlzMS4wMjctMC4xOTcgMS40MTktMC41ODlsMjEuMjM4LTIxLjI0djEwLjU1NWMwLDEuMTA4IDAuODk3LDIuMDA4IDIuMDA4LDIuMDA4IDEuMTA5LDAgMi4wMDgtMC44OTkgMi4wMDgtMi4wMDh2LTE1LjQwMmMwLTAuMjYxLTAuMDUzLTAuNTIyLTAuMTU1LTAuNzY3eiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==)\n    }\n    .easyPrintHolder .page {\n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ0NC44MzMgNDQ0LjgzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgzMyA0NDQuODMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNTUuMjUsNDQ0LjgzM2gzMzQuMzMzYzkuMzUsMCwxNy03LjY1LDE3LTE3VjEzOS4xMTdjMC00LjgxNy0xLjk4My05LjM1LTUuMzgzLTEyLjQ2N0wyNjkuNzMzLDQuNTMzICAgIEMyNjYuNjE3LDEuNywyNjIuMzY3LDAsMjU4LjExNywwSDU1LjI1Yy05LjM1LDAtMTcsNy42NS0xNywxN3Y0MTAuODMzQzM4LjI1LDQzNy4xODMsNDUuOSw0NDQuODMzLDU1LjI1LDQ0NC44MzN6ICAgICBNMzcyLjU4MywxNDYuNDgzdjAuODVIMjU2LjQxN3YtMTA4LjhMMzcyLjU4MywxNDYuNDgzeiBNNzIuMjUsMzRoMTUwLjE2N3YxMzAuMzMzYzAsOS4zNSw3LjY1LDE3LDE3LDE3aDEzMy4xNjd2MjI5LjVINzIuMjVWMzR6ICAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);\n    }\n    .easyPrintHolder .A4Landscape { \n      transform: rotate(-90deg);\n    }\n\n    .leaflet-control-easyPrint-button{\n      display: inline-block;\n    }\n    .easyPrintHolder{\n      margin-top:-31px;\n      margin-bottom: -5px;\n      margin-left: 30px;\n      padding-left: 0px;\n      display: none;\n    }\n\n    .easyPrintSizeMode {\n      display: inline-block;\n    }\n    .easyPrintHolder .easyPrintSizeMode a {\n      border-radius: 0px;\n    }\n\n    .easyPrintHolder .easyPrintSizeMode:last-child a{\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      margin-left: -1px;\n    }\n\n    .easyPrintPortrait:hover, .easyPrintLandscape:hover{\n      background-color: #757570;\n      cursor: pointer;\n    }', document.body.appendChild(t)

      },

      _dataURItoBlob: function (t) {

        for (var e = atob(t.split(',')[1]), n = t.split(',')[0].split(':')[1].split(';')[0], i = new ArrayBuffer(e.length), o = new DataView(i), r = 0; r < e.length; r++) o.setUint8(r, e.charCodeAt(r))

        return new Blob([i], { type: n })

      },

      _togglePageSizeButtons: function (t) {

        var e = this.holder.style, n = this.link.style

        'mouseover' === t.type ? (e.display = 'block', n.borderTopRightRadius = '0', n.borderBottomRightRadius = '0') : (e.display = 'none', n.borderTopRightRadius = '2px', n.borderBottomRightRadius = '2px')

      },

      _toggleControls: function (t) {

        var e = document.getElementsByClassName('leaflet-control-container')[0]

        if (t) return e.style.display = 'block'

        e.style.display = 'none'

      },

      _a4PageSize: {

        height: 715,

        width: 1045

      }

    }), L.easyPrint = function (t) {

      return new L.Control.EasyPrint(t)

    }

  })

//# sourceMappingURL=bundle.js.map

}



export default {

  init

}

/* eslint-disable */
const init = (L) => {
  !function (t, e) {
    'object' == typeof exports && 'undefined' != typeof module ? e() : 'function' == typeof define && define.amd ? define(e) : e()
  }(0, function () {
    'use strict'

    function t (t, e) {
      return e = { exports: {} }, t(e, e.exports), e.exports
    }

    var e = 'undefined' != typeof window ? window : 'undefined' != typeof global ? global : 'undefined' != typeof self ? self : {},
      n = t(function (t) {
        !function (e) {
          function n (t, e) {
            function n (t) {
              return e.bgcolor && (t.style.backgroundColor = e.bgcolor), e.width && (t.style.width = e.width + 'px'), e.height && (t.style.height = e.height + 'px'), e.style && Object.keys(e.style).forEach(function (n) {
                t.style[n] = e.style[n]
              }), t
            }

            return e = e || {}, s(e), Promise.resolve(t).then(function (t) {
              return u(t, e.filter, !0)
            }).then(c).then(d).then(n).then(function (n) {
              return g(n, e.width || h.width(t), e.height || h.height(t))
            })
          }

          function i (t, e) {
            return l(t, e || {}).then(function (e) {
              return e.getContext('2d').getImageData(0, 0, h.width(t), h.height(t)).data
            })
          }

          function o (t, e) {
            return l(t, e || {}).then(function (t) {
              return t.toDataURL()
            })
          }

          function r (t, e) {
            return e = e || {}, l(t, e).then(function (t) {
              return t.toDataURL('image/jpeg', e.quality || 1)
            })
          }

          function a (t, e) {
            return l(t, e || {}).then(h.canvasToBlob)
          }

          function s (t) {
            void 0 === t.imagePlaceholder ? w.impl.options.imagePlaceholder = M.imagePlaceholder : w.impl.options.imagePlaceholder = t.imagePlaceholder, void 0 === t.cacheBust ? w.impl.options.cacheBust = M.cacheBust : w.impl.options.cacheBust = t.cacheBust
          }

          function l (t, e) {
            function i (t) {
              var n = document.createElement('canvas')
              if (n.width = e.width || h.width(t), n.height = e.height || h.height(t), e.bgcolor) {
                var i = n.getContext('2d')
                i.fillStyle = e.bgcolor, i.fillRect(0, 0, n.width, n.height)
              }
              return n
            }

            return n(t, e).then(h.makeImage).then(h.delay(100)).then(function (e) {
              var n = i(t)
              return n.getContext('2d').drawImage(e, 0, 0), n
            })
          }

          function u (t, e, n) {
            function i (t) {
              return t instanceof HTMLCanvasElement ? h.makeImage(t.toDataURL()) : t.cloneNode(!1)
            }

            function o (t, e, n) {
              var i = t.childNodes
              return 0 === i.length ? Promise.resolve(e) : function (t, e, n) {
                var i = Promise.resolve()
                return e.forEach(function (e) {
                  i = i.then(function () {
                    return u(e, n)
                  }).then(function (e) {
                    e && t.appendChild(e)
                  })
                }), i
              }(e, h.asArray(i), n).then(function () {
                return e
              })
            }

            function r (t, e) {
              function n () {
                !function (t, e) {
                  t.cssText ? e.cssText = t.cssText : function (t, e) {
                    h.asArray(t).forEach(function (n) {
                      e.setProperty(n, t.getPropertyValue(n), t.getPropertyPriority(n))
                    })
                  }(t, e)
                }(window.getComputedStyle(t), e.style)
              }

              function i () {
                function n (n) {
                  var i = window.getComputedStyle(t, n), o = i.getPropertyValue('content')
                  if ('' !== o && 'none' !== o) {
                    var r = h.uid()
                    e.className = e.className + ' ' + r
                    var a = document.createElement('style')
                    a.appendChild(function (t, e, n) {
                      var i = '.' + t + ':' + e, o = n.cssText ? function (t) {
                        var e = t.getPropertyValue('content')
                        return t.cssText + ' content: ' + e + ';'
                      }(n) : function (t) {
                        function e (e) {
                          return e + ': ' + t.getPropertyValue(e) + (t.getPropertyPriority(e) ? ' !important' : '')
                        }

                        return h.asArray(t).map(e).join('; ') + ';'
                      }(n)
                      return document.createTextNode(i + '{' + o + '}')
                    }(r, n, i)), e.appendChild(a)
                  }
                }

                [':before', ':after'].forEach(function (t) {
                  n(t)
                })
              }

              function o () {
                t instanceof HTMLTextAreaElement && (e.innerHTML = t.value), t instanceof HTMLInputElement && e.setAttribute('value', t.value)
              }

              function r () {
                e instanceof SVGElement && (e.setAttribute('xmlns', 'http://www.w3.org/2000/svg'), e instanceof SVGRectElement && ['width', 'height'].forEach(function (t) {
                  var n = e.getAttribute(t)
                  n && e.style.setProperty(t, n)
                }))
              }

              return e instanceof Element ? Promise.resolve().then(n).then(i).then(o).then(r).then(function () {
                return e
              }) : e
            }

            return n || !e || e(t) ? Promise.resolve(t).then(i).then(function (n) {
              return o(t, n, e)
            }).then(function (e) {
              return r(t, e)
            }) : Promise.resolve()
          }

          function c (t) {
            return p.resolveAll().then(function (e) {
              var n = document.createElement('style')
              return t.appendChild(n), n.appendChild(document.createTextNode(e)), t
            })
          }

          function d (t) {
            return f.inlineAll(t).then(function () {
              return t
            })
          }

          function g (t, e, n) {
            return Promise.resolve(t).then(function (t) {
              return t.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'), (new XMLSerializer).serializeToString(t)
            }).then(h.escapeXhtml).then(function (t) {
              return '<foreignObject x="0" y="0" width="100%" height="100%">' + t + '</foreignObject>'
            }).then(function (t) {
              return '<svg xmlns="http://www.w3.org/2000/svg" width="' + e + '" height="' + n + '">' + t + '</svg>'
            }).then(function (t) {
              return 'data:image/svg+xml;charset=utf-8,' + t
            })
          }

          var h = function () {
            function t () {
              var t = 'application/font-woff', e = 'image/jpeg'
              return {
                woff: t,
                woff2: t,
                ttf: 'application/font-truetype',
                eot: 'application/vnd.ms-fontobject',
                png: 'image/png',
                jpg: e,
                jpeg: e,
                gif: 'image/gif',
                tiff: 'image/tiff',
                svg: 'image/svg+xml'
              }
            }

            function e (t) {
              var e = /\.([^\.\/]*?)$/g.exec(t)
              return e ? e[1] : ''
            }

            function n (n) {
              var i = e(n).toLowerCase()
              return t()[i] || ''
            }

            function i (t) {
              return -1 !== t.search(/^(data:)/)
            }

            function o (t) {
              return new Promise(function (e) {
                for (var n = window.atob(t.toDataURL().split(',')[1]), i = n.length, o = new Uint8Array(i), r = 0; r < i; r++) o[r] = n.charCodeAt(r)
                e(new Blob([o], { type: 'image/png' }))
              })
            }

            function r (t) {
              return t.toBlob ? new Promise(function (e) {
                t.toBlob(e)
              }) : o(t)
            }

            function a (t, e) {
              var n = document.implementation.createHTMLDocument(), i = n.createElement('base')
              n.head.appendChild(i)
              var o = n.createElement('a')
              return n.body.appendChild(o), i.href = e, o.href = t, o.href
            }

            function s (t) {
              return new Promise(function (e, n) {
                var i = new Image
                i.onload = function () {
                  e(i)
                }, i.onerror = n, i.src = t
              })
            }

            function l (t) {
              var e = 3e4
              return w.impl.options.cacheBust && (t += (/\?/.test(t) ? '&' : '?') + (new Date).getTime()), new Promise(function (n) {
                function i () {
                  if (4 === a.readyState) {
                    if (200 !== a.status) return void (s ? n(s) : r('cannot fetch resource: ' + t + ', status: ' + a.status))
                    var e = new FileReader
                    e.onloadend = function () {
                      var t = e.result.split(/,/)[1]
                      n(t)
                    }, e.readAsDataURL(a.response)
                  }
                }

                function o () {
                  s ? n(s) : r('timeout of ' + e + 'ms occured while fetching resource: ' + t)
                }

                function r (t) {
                  console.error(t), n('')
                }

                var a = new XMLHttpRequest
                a.onreadystatechange = i, a.ontimeout = o, a.responseType = 'blob', a.timeout = e, a.open('GET', t, !0), a.send()
                var s
                if (w.impl.options.imagePlaceholder) {
                  var l = w.impl.options.imagePlaceholder.split(/,/)
                  l && l[1] && (s = l[1])
                }
              })
            }

            function u (t, e) {
              return 'data:' + e + ';base64,' + t
            }

            function c (t) {
              return t.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1')
            }

            function d (t) {
              return function (e) {
                return new Promise(function (n) {
                  setTimeout(function () {
                    n(e)
                  }, t)
                })
              }
            }

            function g (t) {
              for (var e = [], n = t.length, i = 0; i < n; i++) e.push(t[i])
              return e
            }

            function h (t) {
              return t.replace(/#/g, '%23').replace(/\n/g, '%0A')
            }

            function m (t) {
              var e = f(t, 'border-left-width'), n = f(t, 'border-right-width')
              return t.scrollWidth + e + n
            }

            function p (t) {
              var e = f(t, 'border-top-width'), n = f(t, 'border-bottom-width')
              return t.scrollHeight + e + n
            }

            function f (t, e) {
              var n = window.getComputedStyle(t).getPropertyValue(e)
              return parseFloat(n.replace('px', ''))
            }

            return {
              escape: c,
              parseExtension: e,
              mimeType: n,
              dataAsUrl: u,
              isDataUrl: i,
              canvasToBlob: r,
              resolveUrl: a,
              getAndEncode: l,
              uid: function () {
                var t = 0
                return function () {
                  return 'u' + function () {
                    return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
                  }() + t++
                }
              }(),
              delay: d,
              asArray: g,
              escapeXhtml: h,
              makeImage: s,
              width: m,
              height: p
            }
          }(), m = function () {
            function t (t) {
              return -1 !== t.search(o)
            }

            function e (t) {
              for (var e, n = []; null !== (e = o.exec(t));) n.push(e[1])
              return n.filter(function (t) {
                return !h.isDataUrl(t)
              })
            }

            function n (t, e, n, i) {
              function o (t) {
                return new RegExp('(url\\([\'"]?)(' + h.escape(t) + ')([\'"]?\\))', 'g')
              }

              return Promise.resolve(e).then(function (t) {
                return n ? h.resolveUrl(t, n) : t
              }).then(i || h.getAndEncode).then(function (t) {
                return h.dataAsUrl(t, h.mimeType(e))
              }).then(function (n) {
                return t.replace(o(e), '$1' + n + '$3')
              })
            }

            function i (i, o, r) {
              return function () {
                return !t(i)
              }() ? Promise.resolve(i) : Promise.resolve(i).then(e).then(function (t) {
                var e = Promise.resolve(i)
                return t.forEach(function (t) {
                  e = e.then(function (e) {
                    return n(e, t, o, r)
                  })
                }), e
              })
            }

            var o = /url\(['"]?([^'"]+?)['"]?\)/g
            return {
              inlineAll: i,
              shouldProcess: t,
              impl: {
                readUrls: e,
                inline: n
              }
            }
          }(), p = function () {
            function t () {
              return e(document).then(function (t) {
                return Promise.all(t.map(function (t) {
                  return t.resolve()
                }))
              }).then(function (t) {
                return t.join('\n')
              })
            }

            function e () {
              function t (t) {
                return t.filter(function (t) {
                  return t.type === CSSRule.FONT_FACE_RULE
                }).filter(function (t) {
                  return m.shouldProcess(t.style.getPropertyValue('src'))
                })
              }

              function e (t) {
                var e = []
                return t.forEach(function (t) {
                  try {
                    h.asArray(t.cssRules || []).forEach(e.push.bind(e))
                  } catch (e) {
                    console.log('Error while reading CSS rules from ' + t.href, e.toString())
                  }
                }), e
              }

              function n (t) {
                return {
                  resolve: function () {
                    var e = (t.parentStyleSheet || {}).href
                    return m.inlineAll(t.cssText, e)
                  },
                  src: function () {
                    return t.style.getPropertyValue('src')
                  }
                }
              }

              return Promise.resolve(h.asArray(document.styleSheets)).then(e).then(t).then(function (t) {
                return t.map(n)
              })
            }

            return {
              resolveAll: t,
              impl: { readAll: e }
            }
          }(), f = function () {
            function t (t) {
              function e (e) {
                return h.isDataUrl(t.src) ? Promise.resolve() : Promise.resolve(t.src).then(e || h.getAndEncode).then(function (e) {
                  return h.dataAsUrl(e, h.mimeType(t.src))
                }).then(function (e) {
                  return new Promise(function (n, i) {
                    t.onload = n, t.onerror = i, t.src = e
                  })
                })
              }

              return { inline: e }
            }

            function e (n) {
              return n instanceof Element ? function (t) {
                var e = t.style.getPropertyValue('background')
                return e ? m.inlineAll(e).then(function (e) {
                  t.style.setProperty('background', e, t.style.getPropertyPriority('background'))
                }).then(function () {
                  return t
                }) : Promise.resolve(t)
              }(n).then(function () {
                return n instanceof HTMLImageElement ? t(n).inline() : Promise.all(h.asArray(n.childNodes).map(function (t) {
                  return e(t)
                }))
              }) : Promise.resolve(n)
            }

            return {
              inlineAll: e,
              impl: { newImage: t }
            }
          }(), M = {
            imagePlaceholder: void 0,
            cacheBust: !1
          }, w = {
            toSvg: n,
            toPng: o,
            toJpeg: r,
            toBlob: a,
            toPixelData: i,
            impl: {
              fontFaces: p,
              images: f,
              util: h,
              inliner: m,
              options: {}
            }
          }
          t.exports = w
        }()
      }), i = t(function (t) {
        var n = n || function (t) {
          if (!(void 0 === t || 'undefined' != typeof navigator && /MSIE [1-9]\./.test(navigator.userAgent))) {
            var e = t.document, n = function () {
                return t.URL || t.webkitURL || t
              }, i = e.createElementNS('http://www.w3.org/1999/xhtml', 'a'), o = 'download' in i, r = function (t) {
                var e = new MouseEvent('click')
                t.dispatchEvent(e)
              }, a = /constructor/i.test(t.HTMLElement) || t.safari, s = /CriOS\/[\d]+/.test(navigator.userAgent),
              l = function (e) {
                (t.setImmediate || t.setTimeout)(function () {
                  throw e
                }, 0)
              }, u = function (t) {
                var e = function () {
                  'string' == typeof t ? n().revokeObjectURL(t) : t.remove()
                }
                setTimeout(e, 4e4)
              }, c = function (t, e, n) {
                e = [].concat(e)
                for (var i = e.length; i--;) {
                  var o = t['on' + e[i]]
                  if ('function' == typeof o) {
                    try {
                      o.call(t, n || t)
                    } catch (t) {
                      l(t)
                    }
                  }
                }
              }, d = function (t) {
                return /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(t.type) ? new Blob([String.fromCharCode(65279), t], { type: t.type }) : t
              }, g = function (e, l, g) {
                g || (e = d(e))
                var h, m = this, p = e.type, f = 'application/octet-stream' === p, M = function () {
                  c(m, 'writestart progress write writeend'.split(' '))
                }
                if (m.readyState = m.INIT, o) {
                  return h = n().createObjectURL(e), void setTimeout(function () {
                    i.href = h, i.download = l, r(i), M(), u(h), m.readyState = m.DONE
                  })
                }
                !function () {
                  if ((s || f && a) && t.FileReader) {
                    var i = new FileReader
                    return i.onloadend = function () {
                      var e = s ? i.result : i.result.replace(/^data:[^;]*;/, 'data:attachment/file;')
                      t.open(e, '_blank') || (t.location.href = e), e = void 0, m.readyState = m.DONE, M()
                    }, i.readAsDataURL(e), void (m.readyState = m.INIT)
                  }
                  if (h || (h = n().createObjectURL(e)), f) {
                    t.location.href = h
                  } else {
                    t.open(h, '_blank') || (t.location.href = h)
                  }
                  m.readyState = m.DONE, M(), u(h)
                }()
              }, h = g.prototype, m = function (t, e, n) {
                return new g(t, e || t.name || 'download', n)
              }
            return 'undefined' != typeof navigator && navigator.msSaveOrOpenBlob ? function (t, e, n) {
              return e = e || t.name || 'download', n || (t = d(t)), navigator.msSaveOrOpenBlob(t, e)
            } : (h.abort = function () {
            }, h.readyState = h.INIT = 0, h.WRITING = 1, h.DONE = 2, h.error = h.onwritestart = h.onprogress = h.onwrite = h.onabort = h.onerror = h.onwriteend = null, m)
          }
        }('undefined' != typeof self && self || 'undefined' != typeof window && window || e.content)
        t.exports && (t.exports.saveAs = n)
      })
    L.Control.EasyPrint = L.Control.extend({
      options: {
        title: 'Print map',
        position: 'topleft',
        sizeModes: ['Current'],
        filename: 'map',
        exportOnly: !1,
        hidden: !1,
        tileWait: 500,
        hideControlContainer: !0,
        customWindowTitle: window.document.title,
        spinnerBgCOlor: '#0DC5C1',
        customSpinnerClass: 'epLoader',
        defaultSizeTitles: {
          Current: 'Current Size',
          A4Landscape: 'A4 Landscape',
          A4Portrait: 'A4 Portrait'
        }
      },
      onAdd: function () {
        this.mapContainer = this._map.getContainer(), this.options.sizeModes = this.options.sizeModes.map(function (t) {
          return 'Current' === t ? {
            name: this.options.defaultSizeTitles.Current,
            className: 'CurrentSize'
          } : 'A4Landscape' === t ? {
            height: this._a4PageSize.height,
            width: this._a4PageSize.width,
            name: this.options.defaultSizeTitles.A4Landscape,
            className: 'A4Landscape page'
          } : 'A4Portrait' === t ? {
            height: this._a4PageSize.width,
            width: this._a4PageSize.height,
            name: this.options.defaultSizeTitles.A4Portrait,
            className: 'A4Portrait page'
          } : t
        }, this)
        var t = L.DomUtil.create('div', 'leaflet-control-easyPrint leaflet-bar leaflet-control')
        if (!this.options.hidden) {
          this._addCss(), L.DomEvent.addListener(t, 'mouseover', this._togglePageSizeButtons, this), L.DomEvent.addListener(t, 'mouseout', this._togglePageSizeButtons, this)
          var e = 'leaflet-control-easyPrint-button'
          this.options.exportOnly && (e += '-export'), this.link = L.DomUtil.create('a', e, t), this.link.id = 'leafletEasyPrint', this.link.title = this.options.title, this.holder = L.DomUtil.create('ul', 'easyPrintHolder', t), this.options.sizeModes.forEach(function (t) {
            var e = L.DomUtil.create('li', 'easyPrintSizeMode', this.holder)
            e.title = t.name
            L.DomUtil.create('a', t.className, e)
            L.DomEvent.addListener(e, 'click', this.printMap, this)
          }, this), L.DomEvent.disableClickPropagation(t)
        }
        return t
      },
      printMap: function (t, e) {
        e && (this.options.filename = e), this.options.exportOnly || (this._page = window.open('', '_blank', 'toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,left=10, top=10, width=200, height=250, visible=none'), this._page.document.write(this._createSpinner(this.options.customWindowTitle, this.options.customSpinnerClass, this.options.spinnerBgCOlor))), this.originalState = {
          mapWidth: this.mapContainer.style.width,
          widthWasAuto: !1,
          widthWasPercentage: !1,
          mapHeight: this.mapContainer.style.height,
          zoom: this._map.getZoom(),
          center: this._map.getCenter()
        }, 'auto' === this.originalState.mapWidth ? (this.originalState.mapWidth = this._map.getSize().x + 'px', this.originalState.widthWasAuto = !0) : this.originalState.mapWidth.includes('%') && (this.originalState.percentageWidth = this.originalState.mapWidth, this.originalState.widthWasPercentage = !0, this.originalState.mapWidth = this._map.getSize().x + 'px'), this._map.fire('easyPrint-start', { event: t }), this.options.hidden || this._togglePageSizeButtons({ type: null }), this.options.hideControlContainer && this._toggleControls()
        var n = 'string' != typeof t ? t.target.className : t
        if ('CurrentSize' === n) return this._printOpertion(n)
        this.outerContainer = this._createOuterContainer(this.mapContainer), this.originalState.widthWasAuto && (this.outerContainer.style.width = this.originalState.mapWidth), this._createImagePlaceholder(n)
      },
      _createImagePlaceholder: function (t) {
        var e = this
        n.toPng(this.mapContainer, {
          width: parseInt(this.originalState.mapWidth.replace('px')),
          height: parseInt(this.originalState.mapHeight.replace('px'))
        }).then(function (n) {
          e.blankDiv = document.createElement('div')
          var i = e.blankDiv
          e.outerContainer.parentElement.insertBefore(i, e.outerContainer), i.className = 'epHolder', i.style.backgroundImage = 'url("' + n + '")', i.style.position = 'absolute', i.style.zIndex = 1011, i.style.display = 'initial', i.style.width = e.originalState.mapWidth, i.style.height = e.originalState.mapHeight, e._resizeAndPrintMap(t)
        }).catch(function (t) {
          console.error('oops, something went wrong!', t)
        })
      },
      _resizeAndPrintMap: function (t) {
        this.outerContainer.style.opacity = 0
        var e = this.options.sizeModes.filter(function (e) {
          return e.className === t
        })
        e = e[0], this.mapContainer.style.width = e.width + 'px', this.mapContainer.style.height = e.height + 'px', this.mapContainer.style.width > this.mapContainer.style.height ? this.orientation = 'portrait' : this.orientation = 'landscape', this._map.setView(this.originalState.center), this._map.setZoom(this.originalState.zoom), this._map.invalidateSize(), this.options.tileLayer ? this._pausePrint(t) : this._printOpertion(t)
      },
      _pausePrint: function (t) {
        var e = this, n = setInterval(function () {
          e.options.tileLayer.isLoading() || (clearInterval(n), e._printOpertion(t))
        }, e.options.tileWait)
      },
      _printOpertion: function (t) {
        var e = this, o = this.mapContainer.style.width;
        (this.originalState.widthWasAuto && 'CurrentSize' === t || this.originalState.widthWasPercentage && 'CurrentSize' === t) && (o = this.originalState.mapWidth), n.toPng(e.mapContainer, {
          width: parseInt(o),
          height: parseInt(e.mapContainer.style.height.replace('px'))
        }).then(function (t) {
          var n = e._dataURItoBlob(t)
          e.options.exportOnly ? i.saveAs(n, e.options.filename + '.png') : e._sendToBrowserPrint(t, e.orientation), e._toggleControls(!0), e.outerContainer && (e.originalState.widthWasAuto ? e.mapContainer.style.width = 'auto' : e.originalState.widthWasPercentage ? e.mapContainer.style.width = e.originalState.percentageWidth : e.mapContainer.style.width = e.originalState.mapWidth, e.mapContainer.style.height = e.originalState.mapHeight, e._removeOuterContainer(e.mapContainer, e.outerContainer, e.blankDiv), e._map.invalidateSize(), e._map.setView(e.originalState.center), e._map.setZoom(e.originalState.zoom)), e._map.fire('easyPrint-finished')
        }).catch(function (t) {
          console.error('Print operation failed', t)
        })
      },
      _sendToBrowserPrint: function (t, e) {
        this._page.resizeTo(600, 800)
        var n = this._createNewWindow(t, e, this)
        this._page.document.body.innerHTML = '', this._page.document.write(n), this._page.document.close()
      },
      _createSpinner: function (t, e, n) {
        return '<html><head><title>' + t + '</title></head><body><style>\n      body{\n        background: ' + n + ';\n      }\n      .epLoader,\n      .epLoader:before,\n      .epLoader:after {\n        border-radius: 50%;\n      }\n      .epLoader {\n        color: #ffffff;\n        font-size: 11px;\n        text-indent: -99999em;\n        margin: 55px auto;\n        position: relative;\n        width: 10em;\n        height: 10em;\n        box-shadow: inset 0 0 0 1em;\n        -webkit-transform: translateZ(0);\n        -ms-transform: translateZ(0);\n        transform: translateZ(0);\n      }\n      .epLoader:before,\n      .epLoader:after {\n        position: absolute;\n        content: \'\';\n      }\n      .epLoader:before {\n        width: 5.2em;\n        height: 10.2em;\n        background: #0dc5c1;\n        border-radius: 10.2em 0 0 10.2em;\n        top: -0.1em;\n        left: -0.1em;\n        -webkit-transform-origin: 5.2em 5.1em;\n        transform-origin: 5.2em 5.1em;\n        -webkit-animation: load2 2s infinite ease 1.5s;\n        animation: load2 2s infinite ease 1.5s;\n      }\n      .epLoader:after {\n        width: 5.2em;\n        height: 10.2em;\n        background: #0dc5c1;\n        border-radius: 0 10.2em 10.2em 0;\n        top: -0.1em;\n        left: 5.1em;\n        -webkit-transform-origin: 0px 5.1em;\n        transform-origin: 0px 5.1em;\n        -webkit-animation: load2 2s infinite ease;\n        animation: load2 2s infinite ease;\n      }\n      @-webkit-keyframes load2 {\n        0% {\n          -webkit-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n      @keyframes load2 {\n        0% {\n          -webkit-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n      </style>\n    <div class="' + e + '">Loading...</div></body></html>'
      },
      _createNewWindow: function (t, e, n) {
        return '<html><head>\n        <style>@media print {\n          img { max-width: 98%!important; max-height: 98%!important; }\n          @page { size: ' + e + ';}}\n        </style>\n        <script>function step1(){\n        setTimeout(\'step2()\', 10);}\n        function step2(){window.print();window.close()}\n        <\/script></head><body onload=\'step1()\'>\n        <img src="' + t + '" style="display:block; margin:auto;"></body></html>'
      },
      _createOuterContainer: function (t) {
        var e = document.createElement('div')
        return t.parentNode.insertBefore(e, t), t.parentNode.removeChild(t), e.appendChild(t), e.style.width = t.style.width, e.style.height = t.style.height, e.style.display = 'inline-block', e.style.overflow = 'hidden', e
      },
      _removeOuterContainer: function (t, e, n) {
        e.parentNode && (e.parentNode.insertBefore(t, e), e.parentNode.removeChild(n), e.parentNode.removeChild(e))
      },
      _addCss: function () {
        var t = document.createElement('style')
        t.type = 'text/css', t.innerHTML = '.leaflet-control-easyPrint-button { \n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMTI4LDMyaDI1NnY2NEgxMjhWMzJ6IE00ODAsMTI4SDMyYy0xNy42LDAtMzIsMTQuNC0zMiwzMnYxNjBjMCwxNy42LDE0LjM5OCwzMiwzMiwzMmg5NnYxMjhoMjU2VjM1Mmg5NiAgIGMxNy42LDAsMzItMTQuNCwzMi0zMlYxNjBDNTEyLDE0Mi40LDQ5Ny42LDEyOCw0ODAsMTI4eiBNMzUyLDQ0OEgxNjBWMjg4aDE5MlY0NDh6IE00ODcuMTk5LDE3NmMwLDEyLjgxMy0xMC4zODcsMjMuMi0yMy4xOTcsMjMuMiAgIGMtMTIuODEyLDAtMjMuMjAxLTEwLjM4Ny0yMy4yMDEtMjMuMnMxMC4zODktMjMuMiwyMy4xOTktMjMuMkM0NzYuODE0LDE1Mi44LDQ4Ny4xOTksMTYzLjE4Nyw0ODcuMTk5LDE3NnoiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);\n      background-size: 16px 16px; \n      cursor: pointer; \n    }\n    .leaflet-control-easyPrint-button-export { \n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQzMy41IDQzMy41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MzMuNSA0MzMuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJmaWxlLWRvd25sb2FkIj4KCQk8cGF0aCBkPSJNMzk1LjI1LDE1M2gtMTAyVjBoLTE1M3YxNTNoLTEwMmwxNzguNSwxNzguNUwzOTUuMjUsMTUzeiBNMzguMjUsMzgyLjV2NTFoMzU3di01MUgzOC4yNXoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);\n      background-size: 16px 16px; \n      cursor: pointer; \n    }\n    .easyPrintHolder a {\n      background-size: 16px 16px;\n      cursor: pointer;\n    }\n    .easyPrintHolder .CurrentSize{\n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZweCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPgogIDxnPgogICAgPGcgZmlsbD0iIzFEMUQxQiI+CiAgICAgIDxwYXRoIGQ9Ik0yNS4yNTUsMzUuOTA1TDQuMDE2LDU3LjE0NVY0Ni41OWMwLTEuMTA4LTAuODk3LTIuMDA4LTIuMDA4LTIuMDA4QzAuODk4LDQ0LjU4MiwwLDQ1LjQ4MSwwLDQ2LjU5djE1LjQwMiAgICBjMCwwLjI2MSwwLjA1MywwLjUyMSwwLjE1NSwwLjc2N2MwLjIwMywwLjQ5MiwwLjU5NCwwLjg4MiwxLjA4NiwxLjA4N0MxLjQ4Niw2My45NDcsMS43NDcsNjQsMi4wMDgsNjRoMTUuNDAzICAgIGMxLjEwOSwwLDIuMDA4LTAuODk4LDIuMDA4LTIuMDA4cy0wLjg5OC0yLjAwOC0yLjAwOC0yLjAwOEg2Ljg1NWwyMS4yMzgtMjEuMjRjMC43ODQtMC43ODQsMC43ODQtMi4wNTUsMC0yLjgzOSAgICBTMjYuMDM5LDM1LjEyMSwyNS4yNTUsMzUuOTA1eiIgZmlsbD0iIzAwMDAwMCIvPgogICAgICA8cGF0aCBkPSJtNjMuODQ1LDEuMjQxYy0wLjIwMy0wLjQ5MS0wLjU5NC0wLjg4Mi0xLjA4Ni0xLjA4Ny0wLjI0NS0wLjEwMS0wLjUwNi0wLjE1NC0wLjc2Ny0wLjE1NGgtMTUuNDAzYy0xLjEwOSwwLTIuMDA4LDAuODk4LTIuMDA4LDIuMDA4czAuODk4LDIuMDA4IDIuMDA4LDIuMDA4aDEwLjU1NmwtMjEuMjM4LDIxLjI0Yy0wLjc4NCwwLjc4NC0wLjc4NCwyLjA1NSAwLDIuODM5IDAuMzkyLDAuMzkyIDAuOTA2LDAuNTg5IDEuNDIsMC41ODlzMS4wMjctMC4xOTcgMS40MTktMC41ODlsMjEuMjM4LTIxLjI0djEwLjU1NWMwLDEuMTA4IDAuODk3LDIuMDA4IDIuMDA4LDIuMDA4IDEuMTA5LDAgMi4wMDgtMC44OTkgMi4wMDgtMi4wMDh2LTE1LjQwMmMwLTAuMjYxLTAuMDUzLTAuNTIyLTAuMTU1LTAuNzY3eiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==)\n    }\n    .easyPrintHolder .page {\n      background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ0NC44MzMgNDQ0LjgzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgzMyA0NDQuODMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNTUuMjUsNDQ0LjgzM2gzMzQuMzMzYzkuMzUsMCwxNy03LjY1LDE3LTE3VjEzOS4xMTdjMC00LjgxNy0xLjk4My05LjM1LTUuMzgzLTEyLjQ2N0wyNjkuNzMzLDQuNTMzICAgIEMyNjYuNjE3LDEuNywyNjIuMzY3LDAsMjU4LjExNywwSDU1LjI1Yy05LjM1LDAtMTcsNy42NS0xNywxN3Y0MTAuODMzQzM4LjI1LDQzNy4xODMsNDUuOSw0NDQuODMzLDU1LjI1LDQ0NC44MzN6ICAgICBNMzcyLjU4MywxNDYuNDgzdjAuODVIMjU2LjQxN3YtMTA4LjhMMzcyLjU4MywxNDYuNDgzeiBNNzIuMjUsMzRoMTUwLjE2N3YxMzAuMzMzYzAsOS4zNSw3LjY1LDE3LDE3LDE3aDEzMy4xNjd2MjI5LjVINzIuMjVWMzR6ICAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);\n    }\n    .easyPrintHolder .A4Landscape { \n      transform: rotate(-90deg);\n    }\n\n    .leaflet-control-easyPrint-button{\n      display: inline-block;\n    }\n    .easyPrintHolder{\n      margin-top:-31px;\n      margin-bottom: -5px;\n      margin-left: 30px;\n      padding-left: 0px;\n      display: none;\n    }\n\n    .easyPrintSizeMode {\n      display: inline-block;\n    }\n    .easyPrintHolder .easyPrintSizeMode a {\n      border-radius: 0px;\n    }\n\n    .easyPrintHolder .easyPrintSizeMode:last-child a{\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      margin-left: -1px;\n    }\n\n    .easyPrintPortrait:hover, .easyPrintLandscape:hover{\n      background-color: #757570;\n      cursor: pointer;\n    }', document.body.appendChild(t)
      },
      _dataURItoBlob: function (t) {
        for (var e = atob(t.split(',')[1]), n = t.split(',')[0].split(':')[1].split(';')[0], i = new ArrayBuffer(e.length), o = new DataView(i), r = 0; r < e.length; r++) o.setUint8(r, e.charCodeAt(r))
        return new Blob([i], { type: n })
      },
      _togglePageSizeButtons: function (t) {
        var e = this.holder.style, n = this.link.style
        'mouseover' === t.type ? (e.display = 'block', n.borderTopRightRadius = '0', n.borderBottomRightRadius = '0') : (e.display = 'none', n.borderTopRightRadius = '2px', n.borderBottomRightRadius = '2px')
      },
      _toggleControls: function (t) {
        var e = document.getElementsByClassName('leaflet-control-container')[0]
        if (t) return e.style.display = 'block'
        e.style.display = 'none'
      },
      _a4PageSize: {
        height: 715,
        width: 1045
      }
    }), L.easyPrint = function (t) {
      return new L.Control.EasyPrint(t)
    }
  })
//# sourceMappingURL=bundle.js.map
}

export default {
  init
}

 src/components/plugin/FullScreen.js

@@ -1,175 +1,175 @@
/* eslint-disable */

// 全屏展示插件

const init = (L) => {

  (function (factory) {

    if (typeof define === 'function' && define.amd) {

      // AMD

      define(['leaflet'], factory)

    } else if (typeof module !== 'undefined') {

      // Node/CommonJS

      // module.exports = factory(require('leaflet'))

      factory(L)

    } else {

      // Browser globals

      if (typeof window.L === 'undefined') {

        throw new Error('Leaflet must be loaded first')

      }

      factory(window.L)

    }

  }(function (L) {

    L.Control.Fullscreen = L.Control.extend({

      options: {

        position: 'topleft',

        title: {

          false: 'View Fullscreen',

          true: 'Exit Fullscreen'

        }

      },



      onAdd: function (map) {

        var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control')



        this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container)

        this.link.href = '#'



        this._map = map

        this._map.on('fullscreenchange', this._toggleTitle, this)

        this._toggleTitle()



        L.DomEvent.on(this.link, 'click', this._click, this)



        return container

      },



      _click: function (e) {

        L.DomEvent.stopPropagation(e)

        L.DomEvent.preventDefault(e)

        this._map.toggleFullscreen(this.options)

      },



      _toggleTitle: function () {

        this.link.title = this.optionsthis._map.isFullscreen()]

      }

    })



    L.Map.include({

      isFullscreen: function () {

        return this._isFullscreen || false

      },



      toggleFullscreen: function (options) {

        var container = this.getContainer()

        if (this.isFullscreen()) {

          if (options && options.pseudoFullscreen) {

            this._disablePseudoFullscreen(container)

          } else if (document.exitFullscreen) {

            document.exitFullscreen()

          } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen()

          } else if (document.webkitCancelFullScreen) {

            document.webkitCancelFullScreen()

          } else if (document.msExitFullscreen) {

            document.msExitFullscreen()

          } else {

            this._disablePseudoFullscreen(container)

          }

        } else {

          if (options && options.pseudoFullscreen) {

            this._enablePseudoFullscreen(container)

          } else if (container.requestFullscreen) {

            container.requestFullscreen()

          } else if (container.mozRequestFullScreen) {

            container.mozRequestFullScreen()

          } else if (container.webkitRequestFullscreen) {

            container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)

          } else if (container.msRequestFullscreen) {

            container.msRequestFullscreen()

          } else {

            this._enablePseudoFullscreen(container)

          }

        }

      },



      _enablePseudoFullscreen: function (container) {

        L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen')

        this._setFullscreen(true)

        this.fire('fullscreenchange')

      },



      _disablePseudoFullscreen: function (container) {

        L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen')

        this._setFullscreen(false)

        this.fire('fullscreenchange')

      },



      _setFullscreen: function (fullscreen) {

        this._isFullscreen = fullscreen

        var container = this.getContainer()

        if (fullscreen) {

          L.DomUtil.addClass(container, 'leaflet-fullscreen-on')

        } else {

          L.DomUtil.removeClass(container, 'leaflet-fullscreen-on')

        }

        this.invalidateSize()

      },



      _onFullscreenChange: function (e) {

        var fullscreenElement =

          document.fullscreenElement ||

          document.mozFullScreenElement ||

          document.webkitFullscreenElement ||

          document.msFullscreenElement



        if (fullscreenElement === this.getContainer() && !this._isFullscreen) {

          this._setFullscreen(true)

          this.fire('fullscreenchange')

        } else if (fullscreenElement !== this.getContainer() && this._isFullscreen) {

          this._setFullscreen(false)

          this.fire('fullscreenchange')

        }

      }

    })



    L.Map.mergeOptions({

      fullscreenControl: false

    })



    L.Map.addInitHook(function () {

      if (this.options.fullscreenControl) {

        this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl)

        this.addControl(this.fullscreenControl)

      }



      var fullscreenchange



      if ('onfullscreenchange' in document) {

        fullscreenchange = 'fullscreenchange'

      } else if ('onmozfullscreenchange' in document) {

        fullscreenchange = 'mozfullscreenchange'

      } else if ('onwebkitfullscreenchange' in document) {

        fullscreenchange = 'webkitfullscreenchange'

      } else if ('onmsfullscreenchange' in document) {

        fullscreenchange = 'MSFullscreenChange'

      }



      if (fullscreenchange) {

        var onFullscreenChange = L.bind(this._onFullscreenChange, this)



        this.whenReady(function () {

          L.DomEvent.on(document, fullscreenchange, onFullscreenChange)

        })



        this.on('unload', function () {

          L.DomEvent.off(document, fullscreenchange, onFullscreenChange)

        })

      }

    })



    L.control.fullscreen = function (options) {

      return new L.Control.Fullscreen(options)

    }

  }))

}

export default {

  init

}

/* eslint-disable */
// 全屏展示插件
const init = (L) => {
  (function (factory) {
    if (typeof define === 'function' && define.amd) {
      // AMD
      define(['leaflet'], factory)
    } else if (typeof module !== 'undefined') {
      // Node/CommonJS
      // module.exports = factory(require('leaflet'))
      factory(L)
    } else {
      // Browser globals
      if (typeof window.L === 'undefined') {
        throw new Error('Leaflet must be loaded first')
      }
      factory(window.L)
    }
  }(function (L) {
    L.Control.Fullscreen = L.Control.extend({
      options: {
        position: 'topleft',
        title: {
          false: 'View Fullscreen',
          true: 'Exit Fullscreen'
        }
      },

      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control')

        this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container)
        this.link.href = '#'

        this._map = map
        this._map.on('fullscreenchange', this._toggleTitle, this)
        this._toggleTitle()

        L.DomEvent.on(this.link, 'click', this._click, this)

        return container
      },

      _click: function (e) {
        L.DomEvent.stopPropagation(e)
        L.DomEvent.preventDefault(e)
        this._map.toggleFullscreen(this.options)
      },

      _toggleTitle: function () {
        this.link.title = this.optionsthis._map.isFullscreen()]
      }
    })

    L.Map.include({
      isFullscreen: function () {
        return this._isFullscreen || false
      },

      toggleFullscreen: function (options) {
        var container = this.getContainer()
        if (this.isFullscreen()) {
          if (options && options.pseudoFullscreen) {
            this._disablePseudoFullscreen(container)
          } else if (document.exitFullscreen) {
            document.exitFullscreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          } else {
            this._disablePseudoFullscreen(container)
          }
        } else {
          if (options && options.pseudoFullscreen) {
            this._enablePseudoFullscreen(container)
          } else if (container.requestFullscreen) {
            container.requestFullscreen()
          } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen()
          } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
          } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen()
          } else {
            this._enablePseudoFullscreen(container)
          }
        }
      },

      _enablePseudoFullscreen: function (container) {
        L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen')
        this._setFullscreen(true)
        this.fire('fullscreenchange')
      },

      _disablePseudoFullscreen: function (container) {
        L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen')
        this._setFullscreen(false)
        this.fire('fullscreenchange')
      },

      _setFullscreen: function (fullscreen) {
        this._isFullscreen = fullscreen
        var container = this.getContainer()
        if (fullscreen) {
          L.DomUtil.addClass(container, 'leaflet-fullscreen-on')
        } else {
          L.DomUtil.removeClass(container, 'leaflet-fullscreen-on')
        }
        this.invalidateSize()
      },

      _onFullscreenChange: function (e) {
        var fullscreenElement =
          document.fullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          document.msFullscreenElement

        if (fullscreenElement === this.getContainer() && !this._isFullscreen) {
          this._setFullscreen(true)
          this.fire('fullscreenchange')
        } else if (fullscreenElement !== this.getContainer() && this._isFullscreen) {
          this._setFullscreen(false)
          this.fire('fullscreenchange')
        }
      }
    })

    L.Map.mergeOptions({
      fullscreenControl: false
    })

    L.Map.addInitHook(function () {
      if (this.options.fullscreenControl) {
        this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl)
        this.addControl(this.fullscreenControl)
      }

      var fullscreenchange

      if ('onfullscreenchange' in document) {
        fullscreenchange = 'fullscreenchange'
      } else if ('onmozfullscreenchange' in document) {
        fullscreenchange = 'mozfullscreenchange'
      } else if ('onwebkitfullscreenchange' in document) {
        fullscreenchange = 'webkitfullscreenchange'
      } else if ('onmsfullscreenchange' in document) {
        fullscreenchange = 'MSFullscreenChange'
      }

      if (fullscreenchange) {
        var onFullscreenChange = L.bind(this._onFullscreenChange, this)

        this.whenReady(function () {
          L.DomEvent.on(document, fullscreenchange, onFullscreenChange)
        })

        this.on('unload', function () {
          L.DomEvent.off(document, fullscreenchange, onFullscreenChange)
        })
      }
    })

    L.control.fullscreen = function (options) {
      return new L.Control.Fullscreen(options)
    }
  }))
}
export default {
  init
}

 src/components/plugin/MakeTation.js

@@ -1,125 +1,125 @@
/* eslint-disable */

// 添加文字标注

var TextAnnotation = {

  points: [],

  color: '',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  changeColor: '',

  changeContent: '',

  init: function (map, L) {

    // console.log(L)

    TextAnnotation.L = L

    TextAnnotation.map = map

    TextAnnotation.points = []

    TextAnnotation.polyline = null

    TextAnnotation.marker = null

    TextAnnotation.layers = L.layerGroup()

    map.on('click', TextAnnotation.click).on('dblclick', TextAnnotation.dblclick)

  },

  // 设置改变文字内容

  setContent: function (changeContent) {

    // console.log(changeContent)

    TextAnnotation.changeContent = changeContent

  },

  // 设置改变文字颜色

  setColor: function (changeColor) {

    // console.log(changeColor)

    TextAnnotation.changeColor = changeColor

  },

  click: function (e) {

    // console.log(TextAnnotation.changeContent)

    let labIcon = L.divIcon({

      html: '<div style="color:' + TextAnnotation.changeColor + ';font-size: 18px;">' + TextAnnotation.changeContent + '</div>',

      iconSize: [100, 40],

      iconAnchor: [0, 0],

      className: ''

    })

    let marker = L.marker(e.latlng, { icon: labIcon })

    marker.addTo(TextAnnotation.map)

  },

  dblclick: function (e) {

    TextAnnotation.map.off('click', TextAnnotation.click).off('dblclick', TextAnnotation.dblclick)

  },

  destory: function () {

    if (TextAnnotation.polyline) {

      TextAnnotation.map.removeLayer(TextAnnotation.polyline)

    }

    if (TextAnnotation.marker) {

      TextAnnotation.marker.remove()

    }

    if (TextAnnotation.layers) {

      TextAnnotation.layers.clearLayers()

    }

  }

}



// 添加 点 的标注

let pointAnnotation = {

  points: [],

  color: '',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  init: function (map, L) {

    pointAnnotation.L = L

    pointAnnotation.map = map

    pointAnnotation.points = []

    pointAnnotation.polyline = null

    pointAnnotation.marker = null

    pointAnnotation.layers = L.layerGroup()

    map.on('click', pointAnnotation.click).on('dblclick', pointAnnotation.dblclick)

  },

  click: function (e) {

    let marker = L.marker(e.latlng)

    marker.addTo(pointAnnotation.map)

  },

  dblclick: function (e) {

    pointAnnotation.map.off('click', pointAnnotation.click).off('dblclick', pointAnnotation.dblclick)

  },

  destory: function () {

    if (pointAnnotation.polyline) {

      pointAnnotation.map.removeLayer(pointAnnotation.polyline)

    }

    if (pointAnnotation.marker) {

      pointAnnotation.marker.remove()

    }

    if (pointAnnotation.layers) {

      pointAnnotation.layers.clearLayers()

    }

  }

}



// 添加文字标注

const startMakeText = function (map, L) {

  TextAnnotation.init(map, L)

}

// 文字标注的 内容社设置

const setContentText = function (text) {

  TextAnnotation.setContent(text)

}

// 文字标注内容的 颜色 设置

const setContentColor = function (color) {

  TextAnnotation.setColor(color)

}



// 点 标注

const StartPointAnnotation = function (map, L) {

  pointAnnotation.init(map, L)

}



const clearText = function () {

  startMakeText.destory()

}

export default {

  clearText,

  startMakeText,

  setContentText,

  setContentColor,

  StartPointAnnotation

}

/* eslint-disable */
// 添加文字标注
var TextAnnotation = {
  points: [],
  color: '',
  L: null,
  map: null,
  layers: null,
  polyline: null,
  marker: null,
  changeColor: '',
  changeContent: '',
  init: function (map, L) {
    // console.log(L)
    TextAnnotation.L = L
    TextAnnotation.map = map
    TextAnnotation.points = []
    TextAnnotation.polyline = null
    TextAnnotation.marker = null
    TextAnnotation.layers = L.layerGroup()
    map.on('click', TextAnnotation.click).on('dblclick', TextAnnotation.dblclick)
  },
  // 设置改变文字内容
  setContent: function (changeContent) {
    // console.log(changeContent)
    TextAnnotation.changeContent = changeContent
  },
  // 设置改变文字颜色
  setColor: function (changeColor) {
    // console.log(changeColor)
    TextAnnotation.changeColor = changeColor
  },
  click: function (e) {
    // console.log(TextAnnotation.changeContent)
    let labIcon = L.divIcon({
      html: '<div style="color:' + TextAnnotation.changeColor + ';font-size: 18px;">' + TextAnnotation.changeContent + '</div>',
      iconSize: [100, 40],
      iconAnchor: [0, 0],
      className: ''
    })
    let marker = L.marker(e.latlng, { icon: labIcon })
    marker.addTo(TextAnnotation.map)
  },
  dblclick: function (e) {
    TextAnnotation.map.off('click', TextAnnotation.click).off('dblclick', TextAnnotation.dblclick)
  },
  destory: function () {
    if (TextAnnotation.polyline) {
      TextAnnotation.map.removeLayer(TextAnnotation.polyline)
    }
    if (TextAnnotation.marker) {
      TextAnnotation.marker.remove()
    }
    if (TextAnnotation.layers) {
      TextAnnotation.layers.clearLayers()
    }
  }
}

// 添加 点 的标注
let pointAnnotation = {
  points: [],
  color: '',
  L: null,
  map: null,
  layers: null,
  polyline: null,
  marker: null,
  init: function (map, L) {
    pointAnnotation.L = L
    pointAnnotation.map = map
    pointAnnotation.points = []
    pointAnnotation.polyline = null
    pointAnnotation.marker = null
    pointAnnotation.layers = L.layerGroup()
    map.on('click', pointAnnotation.click).on('dblclick', pointAnnotation.dblclick)
  },
  click: function (e) {
    let marker = L.marker(e.latlng)
    marker.addTo(pointAnnotation.map)
  },
  dblclick: function (e) {
    pointAnnotation.map.off('click', pointAnnotation.click).off('dblclick', pointAnnotation.dblclick)
  },
  destory: function () {
    if (pointAnnotation.polyline) {
      pointAnnotation.map.removeLayer(pointAnnotation.polyline)
    }
    if (pointAnnotation.marker) {
      pointAnnotation.marker.remove()
    }
    if (pointAnnotation.layers) {
      pointAnnotation.layers.clearLayers()
    }
  }
}

// 添加文字标注
const startMakeText = function (map, L) {
  TextAnnotation.init(map, L)
}
// 文字标注的 内容社设置
const setContentText = function (text) {
  TextAnnotation.setContent(text)
}
// 文字标注内容的 颜色 设置
const setContentColor = function (color) {
  TextAnnotation.setColor(color)
}

// 点 标注
const StartPointAnnotation = function (map, L) {
  pointAnnotation.init(map, L)
}

const clearText = function () {
  startMakeText.destory()
}
export default {
  clearText,
  startMakeText,
  setContentText,
  setContentColor,
  StartPointAnnotation
}

 src/components/plugin/MeaSure.js

@@ -1,170 +1,170 @@
/* eslint-disable */

// 面积测量方法

var areaMeasure = {

  points: [],

// markers:[],

  color: 'red',

  L: null,

  layers: null,

  polygon: null,

  marker: null,

  init: function (map, L) {

    areaMeasure.L = L

    areaMeasure.map = map

    areaMeasure.points = []

    areaMeasure.polygon = null

    areaMeasure.marker = null

    areaMeasure.layers = L.layerGroup()

    areaMeasure.map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick)

  },

  close: function (latlng) {

    /*areaMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {

    //console.log('marker',e);

    if(areaMeasure.polygon)

    map.removeLayer(areaMeasure.polygon);



    if(areaMeasure.marker)

    areaMeasure.marker.remove();

    });

    //areaMeasure.markers.push(marker);

     */



  },

  click: function (e) {

    areaMeasure.map.doubleClickZoom.disable()

// 添加点信息

    areaMeasure.points.push(e.latlng)

// 添加面

    areaMeasure.map.on('mousemove', areaMeasure.mousemove)

  },

  mousemove: function (e) {

    areaMeasure.points.push(e.latlng)

    if (areaMeasure.polygon) {

      areaMeasure.map.removeLayer(areaMeasure.polygon)

    }

    areaMeasure.polygon = areaMeasure.L.polygon(areaMeasure.points, {

      showMeasurements: true,

      color: 'red'

    })

//areaMeasure.polygon.addTo(map);

    areaMeasure.polygon.addTo(areaMeasure.layers)

    areaMeasure.layers.addTo(areaMeasure.map)

    areaMeasure.points.pop()

  },

  dblclick: function (e) { // 双击结束

    console.log('双击结束', e)

    areaMeasure.polygon.enableEdit()

    areaMeasure.polygon.dragging.disable()

    areaMeasure.map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon)

    areaMeasure.polygon.addTo(areaMeasure.layers)

    areaMeasure.close(e.latlng)

//areaMeasure.polygon.enableEdit();

//map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);

    areaMeasure.map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick)

  },

  destory: function () {

    if (areaMeasure.polygon) {

      areaMeasure.map.removeLayer(areaMeasure.polygon)

    }



    if (areaMeasure.marker) {

      areaMeasure.marker.remove()

    }

    if (areaMeasure.layers) {

      areaMeasure.layers.clearLayers()

    }

  }

}



// 距离测量方法

var distanceMeasure = {

  points: [],

// markers:[],

  color: 'blue',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  init: function (map, L) {

    // console.log(L)

    distanceMeasure.L = L

    distanceMeasure.map = map

    distanceMeasure.points = []

    distanceMeasure.polyline = null

    distanceMeasure.marker = null

    distanceMeasure.layers = L.layerGroup()

    map.on('click', distanceMeasure.click).on('dblclick', distanceMeasure.dblclick)

  },

  close: function (latlng) {

    /*distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {

    //console.log('marker',e);

    if(distanceMeasure.polyline)

    map.removeLayer(distanceMeasure.polyline);



    if(distanceMeasure.marker)

    distanceMeasure.marker.remove();

    });*/

  },

  click: function (e) {

    distanceMeasure.map.doubleClickZoom.disable()

// 添加点信息

    distanceMeasure.points.push(e.latlng)

// 添加线

    distanceMeasure.map.on('mousemove', distanceMeasure.mousemove)

  },

  mousemove: function (e) {

    distanceMeasure.points.push(e.latlng)

    if (distanceMeasure.polyline) {

      distanceMeasure.map.removeLayer(distanceMeasure.polyline)

    }

    distanceMeasure.polyline = distanceMeasure.L.polyline(distanceMeasure.points, {

      showMeasurements: true,

      color: 'red'

    })

    distanceMeasure.polyline.addTo(distanceMeasure.layers)

    // distanceMeasure.polyline.enableEdit()

    distanceMeasure.layers.addTo(distanceMeasure.map)

    distanceMeasure.points.pop()

  },

  dblclick: function (e) { // 双击结束

    console.log('双击结束', e)

    distanceMeasure.polyline.enableEdit()

    distanceMeasure.polyline.dragging.disable()

    distanceMeasure.polyline.addTo(distanceMeasure.layers)

    distanceMeasure.map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polyline.updateMeasurements, distanceMeasure.polyline)

    distanceMeasure.close(e.latlng)

    distanceMeasure.map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick)

  },

  destory: function () {

    if (distanceMeasure.polyline) {

      distanceMeasure.map.removeLayer(distanceMeasure.polyline)

    }

    if (distanceMeasure.marker) {

      distanceMeasure.marker.remove()

    }

    if (distanceMeasure.layers) {

      distanceMeasure.layers.clearLayers()

    }

  }

}



const startMeasureArea = function (map, L) {

  areaMeasure.destory()

  areaMeasure.init(map, L)

}



const startMeasureLen = function (map, L) {

  distanceMeasure.destory()

  distanceMeasure.init(map, L)

}



const clearMeasure = function () {

  areaMeasure.destory()

  distanceMeasure.destory()

}

export default {

  startMeasureArea,

  startMeasureLen,

  clearMeasure

}

/* eslint-disable */
// 面积测量方法
var areaMeasure = {
  points: [],
// markers:[],
  color: 'red',
  L: null,
  layers: null,
  polygon: null,
  marker: null,
  init: function (map, L) {
    areaMeasure.L = L
    areaMeasure.map = map
    areaMeasure.points = []
    areaMeasure.polygon = null
    areaMeasure.marker = null
    areaMeasure.layers = L.layerGroup()
    areaMeasure.map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick)
  },
  close: function (latlng) {
    /*areaMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {
    //console.log('marker',e);
    if(areaMeasure.polygon)
    map.removeLayer(areaMeasure.polygon);

    if(areaMeasure.marker)
    areaMeasure.marker.remove();
    });
    //areaMeasure.markers.push(marker);
     */

  },
  click: function (e) {
    areaMeasure.map.doubleClickZoom.disable()
// 添加点信息
    areaMeasure.points.push(e.latlng)
// 添加面
    areaMeasure.map.on('mousemove', areaMeasure.mousemove)
  },
  mousemove: function (e) {
    areaMeasure.points.push(e.latlng)
    if (areaMeasure.polygon) {
      areaMeasure.map.removeLayer(areaMeasure.polygon)
    }
    areaMeasure.polygon = areaMeasure.L.polygon(areaMeasure.points, {
      showMeasurements: true,
      color: 'red'
    })
//areaMeasure.polygon.addTo(map);
    areaMeasure.polygon.addTo(areaMeasure.layers)
    areaMeasure.layers.addTo(areaMeasure.map)
    areaMeasure.points.pop()
  },
  dblclick: function (e) { // 双击结束
    console.log('双击结束', e)
    areaMeasure.polygon.enableEdit()
    areaMeasure.polygon.dragging.disable()
    areaMeasure.map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon)
    areaMeasure.polygon.addTo(areaMeasure.layers)
    areaMeasure.close(e.latlng)
//areaMeasure.polygon.enableEdit();
//map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);
    areaMeasure.map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick)
  },
  destory: function () {
    if (areaMeasure.polygon) {
      areaMeasure.map.removeLayer(areaMeasure.polygon)
    }

    if (areaMeasure.marker) {
      areaMeasure.marker.remove()
    }
    if (areaMeasure.layers) {
      areaMeasure.layers.clearLayers()
    }
  }
}

// 距离测量方法
var distanceMeasure = {
  points: [],
// markers:[],
  color: 'blue',
  L: null,
  map: null,
  layers: null,
  polyline: null,
  marker: null,
  init: function (map, L) {
    // console.log(L)
    distanceMeasure.L = L
    distanceMeasure.map = map
    distanceMeasure.points = []
    distanceMeasure.polyline = null
    distanceMeasure.marker = null
    distanceMeasure.layers = L.layerGroup()
    map.on('click', distanceMeasure.click).on('dblclick', distanceMeasure.dblclick)
  },
  close: function (latlng) {
    /*distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {
    //console.log('marker',e);
    if(distanceMeasure.polyline)
    map.removeLayer(distanceMeasure.polyline);

    if(distanceMeasure.marker)
    distanceMeasure.marker.remove();
    });*/
  },
  click: function (e) {
    distanceMeasure.map.doubleClickZoom.disable()
// 添加点信息
    distanceMeasure.points.push(e.latlng)
// 添加线
    distanceMeasure.map.on('mousemove', distanceMeasure.mousemove)
  },
  mousemove: function (e) {
    distanceMeasure.points.push(e.latlng)
    if (distanceMeasure.polyline) {
      distanceMeasure.map.removeLayer(distanceMeasure.polyline)
    }
    distanceMeasure.polyline = distanceMeasure.L.polyline(distanceMeasure.points, {
      showMeasurements: true,
      color: 'red'
    })
    distanceMeasure.polyline.addTo(distanceMeasure.layers)
    // distanceMeasure.polyline.enableEdit()
    distanceMeasure.layers.addTo(distanceMeasure.map)
    distanceMeasure.points.pop()
  },
  dblclick: function (e) { // 双击结束
    console.log('双击结束', e)
    distanceMeasure.polyline.enableEdit()
    distanceMeasure.polyline.dragging.disable()
    distanceMeasure.polyline.addTo(distanceMeasure.layers)
    distanceMeasure.map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polyline.updateMeasurements, distanceMeasure.polyline)
    distanceMeasure.close(e.latlng)
    distanceMeasure.map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick)
  },
  destory: function () {
    if (distanceMeasure.polyline) {
      distanceMeasure.map.removeLayer(distanceMeasure.polyline)
    }
    if (distanceMeasure.marker) {
      distanceMeasure.marker.remove()
    }
    if (distanceMeasure.layers) {
      distanceMeasure.layers.clearLayers()
    }
  }
}

const startMeasureArea = function (map, L) {
  areaMeasure.destory()
  areaMeasure.init(map, L)
}

const startMeasureLen = function (map, L) {
  distanceMeasure.destory()
  distanceMeasure.init(map, L)
}

const clearMeasure = function () {
  areaMeasure.destory()
  distanceMeasure.destory()
}
export default {
  startMeasureArea,
  startMeasureLen,
  clearMeasure
}

 src/components/plugin/leaflet-measure-path/leaflet-measure-path.css

@@ -1,22 +1,22 @@
.leaflet-measure-path-measurement {

    position: absolute;

    font-size: 10px;

    color: black;

    text-shadow: -1px  0 0 white,

                 -1px -1px 0 white,

                  0 -1px 0 white,

                  1px -1px 0 white,

                  1px  0 0 white,

                  1px  1px 0 white,

                  0  1px 0 white,

                 -1px  1px 0 white;

    white-space: nowrap;

    transform-origin: 0;

    pointer-events: none;

}



.leaflet-measure-path-measurement > div {

    position: relative;

    margin-top: -25%;

    left: -50%;

}

.leaflet-measure-path-measurement {
    position: absolute;
    font-size: 10px;
    color: black;
    text-shadow: -1px  0 0 white,
                 -1px -1px 0 white,
                  0 -1px 0 white,
                  1px -1px 0 white,
                  1px  0 0 white,
                  1px  1px 0 white,
                  0  1px 0 white,
                 -1px  1px 0 white;
    white-space: nowrap;
    transform-origin: 0;
    pointer-events: none;
}

.leaflet-measure-path-measurement > div {
    position: relative;
    margin-top: -25%;
    left: -50%;
}

 src/components/plugin/leaflet-measure-path/leaflet-measure-path.js

@@ -1,421 +1,421 @@
/* eslint-disable */

 !(function() {

        'use strict'



        L.Marker.Measurement = L[L.Layer ? 'Layer' : 'Class'].extend({

            options: {

                pane: 'markerPane'

            },



            initialize: function(latlng, measurement, title, rotation, options) {

                L.setOptions(this, options)



                this._latlng = latlng

                this._measurement = measurement

                this._title = title

                this._rotation = rotation

            },



            addTo: function(map) {

                map.addLayer(this)

                return this

            },



            onAdd: function(map) {

                this._map = map

                var pane = this.getPane ? this.getPane() : map.getPanes().markerPane

                var el = this._element = L.DomUtil.create('div', 'leaflet-zoom-animated leaflet-measure-path-measurement', pane)

                var inner = L.DomUtil.create('div', '', el)

                inner.title = this._title

                inner.innerHTML = this._measurement



                map.on('zoomanim', this._animateZoom, this)



                this._setPosition()

            },



            onRemove: function(map) {

                map.off('zoomanim', this._animateZoom, this)

                var pane = this.getPane ? this.getPane() : map.getPanes().markerPane

                pane.removeChild(this._element)

                this._map = null

            },



            _setPosition: function() {

                L.DomUtil.setPosition(this._element, this._map.latLngToLayerPoint(this._latlng))

                this._element.style.transform += ' rotate(' + this._rotation + 'rad)'

            },



            _animateZoom: function(opt) {

                var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round()

                L.DomUtil.setPosition(this._element, pos)

                this._element.style.transform += ' rotate(' + this._rotation + 'rad)'

            }

        })



        L.marker.measurement = function(latLng, measurement, title, rotation, options) {

            return new L.Marker.Measurement(latLng, measurement, title, rotation, options)

        }



        var formatDistance = function(d) {

            var unit,

                feet



            if (this._measurementOptions.imperial) {

                feet = d / 0.3048

                if (feet > 3000) {

                    d = d / 1609.344

                    unit = 'mi'

                } else {

                    d = feet

                    unit = 'ft'

                }

            } else {

                if (d > 1000) {

                    d = d / 1000

                    unit = 'km'

                } else {

                    unit = 'm'

                }

            }



            if (d < 100) {

                return d.toFixed(1) + ' ' + unit

            } else {

                return Math.round(d) + ' ' + unit

            }

        }



        var formatArea = function(a) {

            var unit,

                sqfeet



            if (this._measurementOptions.imperial) {

                if (a > 404.685642) {

                    a = a / 4046.85642

                    unit = 'ac'

                } else {

                    a = a / 0.09290304

                    unit = 'ft²'

                }

            } else {

                if (a > 1000000) {

                    a = a / 1000000

                    unit = 'km²'

                } else {

                    unit = 'm²'

                }

            }



            if (a < 100) {

                return a.toFixed(1) + ' ' + unit

            } else {

                return Math.round(a) + ' ' + unit

            }

        }



        var RADIUS = 6378137

        // ringArea function copied from geojson-area

        // (https://github.com/mapbox/geojson-area)

        // This function is distributed under a separate license,

        // see LICENSE.md.

        var ringArea = function ringArea(coords) {

            var rad = function rad(_) {

                return _ * Math.PI / 180

            }

            var p1, p2, p3, lowerIndex, middleIndex, upperIndex,

                area = 0,

                coordsLength = coords.length



            if (coordsLength > 2) {

                for (var i = 0; i < coordsLength; i++) {

                    if (i === coordsLength - 2) {// i = N-2

                        lowerIndex = coordsLength - 2

                        middleIndex = coordsLength -1

                        upperIndex = 0

                    } else if (i === coordsLength - 1) {// i = N-1

                        lowerIndex = coordsLength - 1

                        middleIndex = 0

                        upperIndex = 1

                    } else { // i = 0 to N-3

                        lowerIndex = i

                        middleIndex = i+1

                        upperIndex = i+2

                    }

                    p1 = coords[lowerIndex]

                    p2 = coords[middleIndex]

                    p3 = coords[upperIndex]

                    area += ( rad(p3.lng) - rad(p1.lng) ) * Math.sin( rad(p2.lat))

                }



                area = area * RADIUS * RADIUS / 2

            }



            return Math.abs(area)

        }

        /**

         * Handles the init hook for polylines and circles.

         * Implements the showOnHover functionality if called for.

         */

        var addInitHook = function() {

            var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover

            if (this.options.showMeasurements && !showOnHover) {

                this.showMeasurements()

            }

            if (this.options.showMeasurements && showOnHover) {

                this.on('mouseover', function() {

                    this.showMeasurements()

                })

                this.on('mouseout', function() {

                    this.hideMeasurements()

                })

            }

        }



        var circleArea = function circleArea(d) {

            var rho = d / RADIUS

            return 2 * Math.PI * RADIUS * RADIUS * (1 - Math.cos(rho))

        }



        var override = function(method, fn, hookAfter) {

            if (!hookAfter) {

                return function() {

                    var originalReturnValue = method.apply(this, arguments)

                    var args = Array.prototype.slice.call(arguments)

                    args.push(originalReturnValue)

                    return fn.apply(this, args)

                }

            } else {

                return function() {

                    fn.apply(this, arguments)

                    return method.apply(this, arguments)

                }

            }

        }



        L.Polyline.include({

            showMeasurements: function(options) {

                if (!this._map || this._measurementLayer) return this



                this._measurementOptions = L.extend({

                    showOnHover: (options && options.showOnHover) || false,

                    minPixelDistance: 30,

                    showDistances: true,

                    showArea: true,

                    showTotalDistance: true,

                    lang: {

                        totalLength: 'Total length',

                        totalArea: 'Total area',

                        segmentLength: 'Segment length'

                    }

                }, options || {})



                this._measurementLayer = L.layerGroup().addTo(this._map)

                this.updateMeasurements()



                this._map.on('zoomend', this.updateMeasurements, this)



                return this

            },



            hideMeasurements: function() {

                if (!this._map) return this



                this._map.off('zoomend', this.updateMeasurements, this)



                if (!this._measurementLayer) return this

                this._map.removeLayer(this._measurementLayer)

                this._measurementLayer = null



                return this

            },



            onAdd: override(L.Polyline.prototype.onAdd, function(originalReturnValue) {

                var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover

                if (this.options.showMeasurements && !showOnHover) {

                    this.showMeasurements(this.options.measurementOptions)

                }



                return originalReturnValue

            }),



            onRemove: override(L.Polyline.prototype.onRemove, function(originalReturnValue) {

                this.hideMeasurements()



                return originalReturnValue

            }, true),



            setLatLngs: override(L.Polyline.prototype.setLatLngs, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            spliceLatLngs: override(L.Polyline.prototype.spliceLatLngs, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            formatDistance: formatDistance,

            formatArea: formatArea,



            updateMeasurements: function() {

                if (!this._measurementLayer) return this



                var latLngs = this.getLatLngs(),

                    isPolygon = this instanceof L.Polygon,

                    options = this._measurementOptions,

                    totalDist = 0,

                    formatter,

                    ll1,

                    ll2,

                    p1,

                    p2,

                    pixelDist,

                    dist



                if (latLngs && latLngs.length && L.Util.isArray(latLngs[0])) {

                    // Outer ring is stored as an array in the first element,

                    // use that instead.

                    latLngs = latLngs[0]

                }



                this._measurementLayer.clearLayers()



                if (this._measurementOptions.showDistances && latLngs.length > 1) {

                    formatter = this._measurementOptions.formatDistance || L.bind(this.formatDistance, this)



                    for (var i = 1, len = latLngs.length; (isPolygon && i <= len) || i < len; i++) {

                        ll1 = latLngs[i - 1]

                        ll2 = latLngs[i % len]

                        dist = ll1.distanceTo(ll2)

                        totalDist += dist



                        p1 = this._map.latLngToLayerPoint(ll1)

                        p2 = this._map.latLngToLayerPoint(ll2)



                        pixelDist = p1.distanceTo(p2)



                        if (pixelDist >= options.minPixelDistance) {

                            L.marker.measurement(

                                this._map.layerPointToLatLng([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]),

                                formatter(dist), options.lang.segmentLength, this._getRotation(ll1, ll2), options)

                                .addTo(this._measurementLayer)

                        }

                    }



                    // Show total length for polylines

                    if (!isPolygon && this._measurementOptions.showTotalDistance) {

                        L.marker.measurement(ll2, formatter(totalDist), options.lang.totalLength, 0, options)

                            .addTo(this._measurementLayer)

                    }

                }



                if (isPolygon && options.showArea && latLngs.length > 2) {

                    formatter = options.formatArea || L.bind(this.formatArea, this)

                    var area = ringArea(latLngs)

                    L.marker.measurement(this.getBounds().getCenter(),

                        formatter(area), options.lang.totalArea, 0, options)

                        .addTo(this._measurementLayer)

                }



                return this

            },



            _getRotation: function(ll1, ll2) {

                var p1 = this._map.project(ll1),

                    p2 = this._map.project(ll2)



                return Math.atan((p2.y - p1.y) / (p2.x - p1.x))

            }

        })



        L.Polyline.addInitHook(function() {

            addInitHook.call(this)

        })



        L.Circle.include({

            showMeasurements: function(options) {

                if (!this._map || this._measurementLayer) return this



                this._measurementOptions = L.extend({

                    showOnHover: false,

                    showArea: true,

                    lang: {

                        totalArea: 'Total area',

                    }

                }, options || {})



                this._measurementLayer = L.layerGroup().addTo(this._map)

                this.updateMeasurements()



                this._map.on('zoomend', this.updateMeasurements, this)



                return this

            },



            hideMeasurements: function() {

                if (!this._map) return this



                this._map.on('zoomend', this.updateMeasurements, this)



                if (!this._measurementLayer) return this

                this._map.removeLayer(this._measurementLayer)

                this._measurementLayer = null



                return this

            },



            onAdd: override(L.Circle.prototype.onAdd, function(originalReturnValue) {

                var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover

                if (this.options.showMeasurements && !showOnHover) {

                    this.showMeasurements(this.options.measurementOptions)

                }



                return originalReturnValue

            }),



            onRemove: override(L.Circle.prototype.onRemove, function(originalReturnValue) {

                this.hideMeasurements()



                return originalReturnValue

            }, true),



            setLatLng: override(L.Circle.prototype.setLatLng, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            setRadius: override(L.Circle.prototype.setRadius, function(originalReturnValue) {

                this.updateMeasurements()



                return originalReturnValue

            }),



            formatArea: formatArea,



            updateMeasurements: function() {

                if (!this._measurementLayer) return



                var latLng = this.getLatLng(),

                    options = this._measurementOptions,

                    formatter = options.formatArea || L.bind(this.formatArea, this)



                this._measurementLayer.clearLayers()



                if (options.showArea) {

                    formatter = options.formatArea || L.bind(this.formatArea, this)

                    var area = circleArea(this.getRadius())

                    L.marker.measurement(latLng,

                        formatter(area), options.lang.totalArea, 0, options)

                        .addTo(this._measurementLayer)

                }

            }

        })



        L.Circle.addInitHook(function() {

            addInitHook.call(this)

        })

/* eslint-disable */
 !(function() {
        'use strict'

        L.Marker.Measurement = L[L.Layer ? 'Layer' : 'Class'].extend({
            options: {
                pane: 'markerPane'
            },

            initialize: function(latlng, measurement, title, rotation, options) {
                L.setOptions(this, options)

                this._latlng = latlng
                this._measurement = measurement
                this._title = title
                this._rotation = rotation
            },

            addTo: function(map) {
                map.addLayer(this)
                return this
            },

            onAdd: function(map) {
                this._map = map
                var pane = this.getPane ? this.getPane() : map.getPanes().markerPane
                var el = this._element = L.DomUtil.create('div', 'leaflet-zoom-animated leaflet-measure-path-measurement', pane)
                var inner = L.DomUtil.create('div', '', el)
                inner.title = this._title
                inner.innerHTML = this._measurement

                map.on('zoomanim', this._animateZoom, this)

                this._setPosition()
            },

            onRemove: function(map) {
                map.off('zoomanim', this._animateZoom, this)
                var pane = this.getPane ? this.getPane() : map.getPanes().markerPane
                pane.removeChild(this._element)
                this._map = null
            },

            _setPosition: function() {
                L.DomUtil.setPosition(this._element, this._map.latLngToLayerPoint(this._latlng))
                this._element.style.transform += ' rotate(' + this._rotation + 'rad)'
            },

            _animateZoom: function(opt) {
                var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round()
                L.DomUtil.setPosition(this._element, pos)
                this._element.style.transform += ' rotate(' + this._rotation + 'rad)'
            }
        })

        L.marker.measurement = function(latLng, measurement, title, rotation, options) {
            return new L.Marker.Measurement(latLng, measurement, title, rotation, options)
        }

        var formatDistance = function(d) {
            var unit,
                feet

            if (this._measurementOptions.imperial) {
                feet = d / 0.3048
                if (feet > 3000) {
                    d = d / 1609.344
                    unit = 'mi'
                } else {
                    d = feet
                    unit = 'ft'
                }
            } else {
                if (d > 1000) {
                    d = d / 1000
                    unit = 'km'
                } else {
                    unit = 'm'
                }
            }

            if (d < 100) {
                return d.toFixed(1) + ' ' + unit
            } else {
                return Math.round(d) + ' ' + unit
            }
        }

        var formatArea = function(a) {
            var unit,
                sqfeet

            if (this._measurementOptions.imperial) {
                if (a > 404.685642) {
                    a = a / 4046.85642
                    unit = 'ac'
                } else {
                    a = a / 0.09290304
                    unit = 'ft²'
                }
            } else {
                if (a > 1000000) {
                    a = a / 1000000
                    unit = 'km²'
                } else {
                    unit = 'm²'
                }
            }

            if (a < 100) {
                return a.toFixed(1) + ' ' + unit
            } else {
                return Math.round(a) + ' ' + unit
            }
        }

        var RADIUS = 6378137
        // ringArea function copied from geojson-area
        // (https://github.com/mapbox/geojson-area)
        // This function is distributed under a separate license,
        // see LICENSE.md.
        var ringArea = function ringArea(coords) {
            var rad = function rad(_) {
                return _ * Math.PI / 180
            }
            var p1, p2, p3, lowerIndex, middleIndex, upperIndex,
                area = 0,
                coordsLength = coords.length

            if (coordsLength > 2) {
                for (var i = 0; i < coordsLength; i++) {
                    if (i === coordsLength - 2) {// i = N-2
                        lowerIndex = coordsLength - 2
                        middleIndex = coordsLength -1
                        upperIndex = 0
                    } else if (i === coordsLength - 1) {// i = N-1
                        lowerIndex = coordsLength - 1
                        middleIndex = 0
                        upperIndex = 1
                    } else { // i = 0 to N-3
                        lowerIndex = i
                        middleIndex = i+1
                        upperIndex = i+2
                    }
                    p1 = coords[lowerIndex]
                    p2 = coords[middleIndex]
                    p3 = coords[upperIndex]
                    area += ( rad(p3.lng) - rad(p1.lng) ) * Math.sin( rad(p2.lat))
                }

                area = area * RADIUS * RADIUS / 2
            }

            return Math.abs(area)
        }
        /**
         * Handles the init hook for polylines and circles.
         * Implements the showOnHover functionality if called for.
         */
        var addInitHook = function() {
            var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover
            if (this.options.showMeasurements && !showOnHover) {
                this.showMeasurements()
            }
            if (this.options.showMeasurements && showOnHover) {
                this.on('mouseover', function() {
                    this.showMeasurements()
                })
                this.on('mouseout', function() {
                    this.hideMeasurements()
                })
            }
        }

        var circleArea = function circleArea(d) {
            var rho = d / RADIUS
            return 2 * Math.PI * RADIUS * RADIUS * (1 - Math.cos(rho))
        }

        var override = function(method, fn, hookAfter) {
            if (!hookAfter) {
                return function() {
                    var originalReturnValue = method.apply(this, arguments)
                    var args = Array.prototype.slice.call(arguments)
                    args.push(originalReturnValue)
                    return fn.apply(this, args)
                }
            } else {
                return function() {
                    fn.apply(this, arguments)
                    return method.apply(this, arguments)
                }
            }
        }

        L.Polyline.include({
            showMeasurements: function(options) {
                if (!this._map || this._measurementLayer) return this

                this._measurementOptions = L.extend({
                    showOnHover: (options && options.showOnHover) || false,
                    minPixelDistance: 30,
                    showDistances: true,
                    showArea: true,
                    showTotalDistance: true,
                    lang: {
                        totalLength: 'Total length',
                        totalArea: 'Total area',
                        segmentLength: 'Segment length'
                    }
                }, options || {})

                this._measurementLayer = L.layerGroup().addTo(this._map)
                this.updateMeasurements()

                this._map.on('zoomend', this.updateMeasurements, this)

                return this
            },

            hideMeasurements: function() {
                if (!this._map) return this

                this._map.off('zoomend', this.updateMeasurements, this)

                if (!this._measurementLayer) return this
                this._map.removeLayer(this._measurementLayer)
                this._measurementLayer = null

                return this
            },

            onAdd: override(L.Polyline.prototype.onAdd, function(originalReturnValue) {
                var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover
                if (this.options.showMeasurements && !showOnHover) {
                    this.showMeasurements(this.options.measurementOptions)
                }

                return originalReturnValue
            }),

            onRemove: override(L.Polyline.prototype.onRemove, function(originalReturnValue) {
                this.hideMeasurements()

                return originalReturnValue
            }, true),

            setLatLngs: override(L.Polyline.prototype.setLatLngs, function(originalReturnValue) {
                this.updateMeasurements()

                return originalReturnValue
            }),

            spliceLatLngs: override(L.Polyline.prototype.spliceLatLngs, function(originalReturnValue) {
                this.updateMeasurements()

                return originalReturnValue
            }),

            formatDistance: formatDistance,
            formatArea: formatArea,

            updateMeasurements: function() {
                if (!this._measurementLayer) return this

                var latLngs = this.getLatLngs(),
                    isPolygon = this instanceof L.Polygon,
                    options = this._measurementOptions,
                    totalDist = 0,
                    formatter,
                    ll1,
                    ll2,
                    p1,
                    p2,
                    pixelDist,
                    dist

                if (latLngs && latLngs.length && L.Util.isArray(latLngs[0])) {
                    // Outer ring is stored as an array in the first element,
                    // use that instead.
                    latLngs = latLngs[0]
                }

                this._measurementLayer.clearLayers()

                if (this._measurementOptions.showDistances && latLngs.length > 1) {
                    formatter = this._measurementOptions.formatDistance || L.bind(this.formatDistance, this)

                    for (var i = 1, len = latLngs.length; (isPolygon && i <= len) || i < len; i++) {
                        ll1 = latLngs[i - 1]
                        ll2 = latLngs[i % len]
                        dist = ll1.distanceTo(ll2)
                        totalDist += dist

                        p1 = this._map.latLngToLayerPoint(ll1)
                        p2 = this._map.latLngToLayerPoint(ll2)

                        pixelDist = p1.distanceTo(p2)

                        if (pixelDist >= options.minPixelDistance) {
                            L.marker.measurement(
                                this._map.layerPointToLatLng([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]),
                                formatter(dist), options.lang.segmentLength, this._getRotation(ll1, ll2), options)
                                .addTo(this._measurementLayer)
                        }
                    }

                    // Show total length for polylines
                    if (!isPolygon && this._measurementOptions.showTotalDistance) {
                        L.marker.measurement(ll2, formatter(totalDist), options.lang.totalLength, 0, options)
                            .addTo(this._measurementLayer)
                    }
                }

                if (isPolygon && options.showArea && latLngs.length > 2) {
                    formatter = options.formatArea || L.bind(this.formatArea, this)
                    var area = ringArea(latLngs)
                    L.marker.measurement(this.getBounds().getCenter(),
                        formatter(area), options.lang.totalArea, 0, options)
                        .addTo(this._measurementLayer)
                }

                return this
            },

            _getRotation: function(ll1, ll2) {
                var p1 = this._map.project(ll1),
                    p2 = this._map.project(ll2)

                return Math.atan((p2.y - p1.y) / (p2.x - p1.x))
            }
        })

        L.Polyline.addInitHook(function() {
            addInitHook.call(this)
        })

        L.Circle.include({
            showMeasurements: function(options) {
                if (!this._map || this._measurementLayer) return this

                this._measurementOptions = L.extend({
                    showOnHover: false,
                    showArea: true,
                    lang: {
                        totalArea: 'Total area',
                    }
                }, options || {})

                this._measurementLayer = L.layerGroup().addTo(this._map)
                this.updateMeasurements()

                this._map.on('zoomend', this.updateMeasurements, this)

                return this
            },

            hideMeasurements: function() {
                if (!this._map) return this

                this._map.on('zoomend', this.updateMeasurements, this)

                if (!this._measurementLayer) return this
                this._map.removeLayer(this._measurementLayer)
                this._measurementLayer = null

                return this
            },

            onAdd: override(L.Circle.prototype.onAdd, function(originalReturnValue) {
                var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover
                if (this.options.showMeasurements && !showOnHover) {
                    this.showMeasurements(this.options.measurementOptions)
                }

                return originalReturnValue
            }),

            onRemove: override(L.Circle.prototype.onRemove, function(originalReturnValue) {
                this.hideMeasurements()

                return originalReturnValue
            }, true),

            setLatLng: override(L.Circle.prototype.setLatLng, function(originalReturnValue) {
                this.updateMeasurements()

                return originalReturnValue
            }),

            setRadius: override(L.Circle.prototype.setRadius, function(originalReturnValue) {
                this.updateMeasurements()

                return originalReturnValue
            }),

            formatArea: formatArea,

            updateMeasurements: function() {
                if (!this._measurementLayer) return

                var latLng = this.getLatLng(),
                    options = this._measurementOptions,
                    formatter = options.formatArea || L.bind(this.formatArea, this)

                this._measurementLayer.clearLayers()

                if (options.showArea) {
                    formatter = options.formatArea || L.bind(this.formatArea, this)
                    var area = circleArea(this.getRadius())
                    L.marker.measurement(latLng,
                        formatter(area), options.lang.totalArea, 0, options)
                        .addTo(this._measurementLayer)
                }
            }
        })

        L.Circle.addInitHook(function() {
            addInitHook.call(this)
        })
    })()

 src/components/table/components/SolidWaste.vue

@@ -1,111 +1,201 @@
<template>
   <div class="Solid-Waste">
       <el-table
               class="tableBox"
               :data="tableData"
               :header-cell-style="tableHeaderColor"
               :cell-style="rowClass"
               @cell-click="handle"
       >
           <el-table-column
                   width="30px"
                   label=""
           >
               <template>
                   <i class="el-icon-caret-right"></i>
                   <span style="margin-left: 10px"></span>
               </template>
           </el-table-column>
           <el-table-column
                   label="序号"
                   width="60px"
                   type="index">
           </el-table-column>
           <el-table-column
                   prop="UserName"
                   label="企业名称"
                   width="120px">
             <template slot-scope="scope">
               <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{scope.row.UserName}}</div>
               <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{scope.row.UserName}}</div>
               <div v-else >{{scope.row.UserName}}</div>
             </template>
           </el-table-column>
           <el-table-column label="产生量 （吨）">
               <el-table-column
                       prop="AddOutPut"
                       label="一般固废"
                       width="100px">
               </el-table-column>
               <el-table-column
                       prop="MonthOutPut"
                       label="危险废物"
                       width="100px">
               </el-table-column>
           </el-table-column>
           <el-table-column label="贮存状态（个）">
               <el-table-column
                       prop="normal"
                       label="正常"
                       width="100px">
                 <template slot-scope="{row,$index}">
                   <u v-if="$index!=1" >{{row.normal}}</u>
                   <el-popover v-else
                               placement="bottom-end"
                               width="200"
                               trigger="click"
                               title="监测点排放明细"
                   >
                     <ChemicalWastewater></ChemicalWastewater>
                     <u slot="reference" style="color: #00ffff">{{row.normal}}</u>
                   </el-popover>
                 </template>
               </el-table-column>
               <el-table-column
                       prop="warning"
                       label="预警"
                       width="100px">
               </el-table-column>
           </el-table-column>
       </el-table>
   </div>
  <div class="waste-water">
    <el-table
        class="tableBox"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="tableHeaderColor"
        :cell-style="rowClass"
        @cell-click="handle"
    >
      <el-table-column
          width="30px"
          label=""
      >
        <template slot-scope="{row,$index}">
          <!--                   <i class="el-icon-caret-right" v-if="$index ===1"></i>-->
          <el-popover
              placement="bottom"
              trigger="click"
              :disabled="!isShowIcon"
              popper-class="popovers"
          >
            <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
            <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
            <!--                   <i class="el-icon-caret-bottom"   slot="reference" v-else @click="doIcon($index)"></i>-->
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="序号"
          width="45px"
          type="index">
      </el-table-column>
      <el-table-column
          prop="UserName"
          label="企业名称"
          width="120px">
        <template slot-scope="scope">
          <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else >{{scope.row.UserName}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="WasteWaters"
          label="外排废水量（m³）"
          width="100px">
      </el-table-column>
      <el-table-column label="COD  (t)">
        <el-table-column
            prop="AddOutPut"
            label="累计产生量"
            width="70px">
        </el-table-column>
        <el-table-column
            prop="MonthOutPut"
            label="当月生产量"
            width="70px">
        </el-table-column>
      </el-table-column>
      <el-table-column label="氨氮  (t)">
        <el-table-column
            prop="NH4NPut"
            label="累计产生量"
            width="70px">
        </el-table-column>
        <el-table-column
            prop="NH4NMonth"
            label="当月生产量"
            width="70px">
        </el-table-column>
      </el-table-column>
      <el-table-column label="排放口检测统计状态">
        <el-table-column
            prop="normal"
            label="正常"
            width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=2" >{{row.normal}}</u>
            <el-popover v-else
                        placement="bottom-end"
                        width="200"
                        trigger="click"
                        popper-class="popovers"
                        title="监测点明细表"
            >
              <refinery></refinery>
              <u slot="reference" style="color: #00ffff">{{row.normal}}</u>
              <!--                       <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>-->
              <!--                       <i v-if="isShowIcon" class="el-icon-caret-bottom" slot="reference" @click="isbtn"></i>-->
              <!--                   <i v-else class="el-icon-caret-right" slot="reference" @click="isbtn"></i>-->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="overProof"
            label="超标"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="Abnormal"
            label="异常"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="StopProduction"
            label="停产"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="deficiency"
            label="缺失"
            width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=1" >{{row.deficiency}}</u>
            <el-popover v-else
                        placement="bottom-end"
                        width="200"
                        trigger="click"
                        title="天津石化监测点缺失报警明细"
                        popper-class="popovers"
            >
              <MissingAlarm></MissingAlarm>
              <u slot="reference" style="color: #00ffff">{{row.deficiency}}</u>
            </el-popover>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!--       <ChemicalWastewater v-show="isShowIcon"></ChemicalWastewater>-->
    <!--           </el-col>-->
    <!--       </el-row>-->
  </div>
</template>

<script>
import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater'
import ChemicalWastewater from './componented/ChemicalWastewater'
import Refinery from '@components/table/components/componented/refinery'
import MissingAlarm from '@components/table/components/componented/MissingAlarm'
export default {
  name: 'SolidWaste',
  components: {
    MissingAlarm,
    Refinery,
    ChemicalWastewater
  },
  data () {
    return {
      isActive: '',
      isShowIcon: false,
      tableData: [{
        UserName: '集团名称',
        AddOutPut: '580',
        MonthOutPut: '250',
        normal: '10',
        warning: '9'
        WasteWaters: '',
        AddOutPut: '',
        MonthOutPut: '',
        NH4NPut: '',
        NH4NMonth: '',
        normal: '',
        overProof: '',
        Abnormal: '',
        StopProduction: '',
        deficiency: ''
      }, {
        UserName: '天津石化',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'
      }, {
        UserName: 'xxxx炼化3',
        WasteWaters: '116.6',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'
      }, {
        UserName: 'xxxx4',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'

      }]
    }
  },
@@ -120,14 +210,35 @@
    // 获取点击的表格
    handle (row, column, event, cell) {
      console.log(row.UserName)
    },
    doIcon (index) {
      if (index !== 1) {
        this.isShowIcon = false
        this.isActive = ''
        return
      }
      this.isShowIcon = !this.isShowIcon
      if (index === this.isActive) {
        this.isActive = ''
        return
      }
      this.isActive = index
    }
  }
}
</script>

<style scoped>
.Solid-Waste{
    width: 100%;
    height: 100%;
.popovers{
  width: auto !important;
  background-color: gray !important;
}
.popovers.el-popover{
  padding:0;
}
.active {
  /*color: red;*/
  transform:rotate(90deg);
}

</style>

 src/components/table/components/tabHandover.vue

@@ -4,7 +4,8 @@
      <waste-water></waste-water>
    </el-tab-pane>
    <el-tab-pane label="废气" name="second">
      <waste-gas></waste-gas>
      <waste-water></waste-water>
<!--      <waste-gas></waste-gas>-->
    </el-tab-pane>
    <el-tab-pane label="固废" name="third">
      <solid-waste></solid-waste>
@@ -17,14 +18,14 @@

<script>
import WasteWater from '@components/table/components/WasteWater'
import WasteGas from '@components/table/components/WasteGas'
// import WasteGas from '@components/table/components/WasteGas'
import SolidWaste from '@components/table/components/SolidWaste'
import AirQuality from '@components/table/components/AirQuality'
export default {
  name: 'tabHandover',
  components: {
    WasteWater,
    WasteGas,
    // WasteGas,
    SolidWaste,
    AirQuality
  },

 src/components/table/summarySheets.vue

@@ -1,37 +1,87 @@
<template>
    <div class="summary-sheets">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="left">
            <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
  <div class="summary-sheets">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn" >
         <i class="el-icon-tickets icon"></i>
      </div>
    </el-tooltip>
    <transition name="animationChange">
        <div class="subtopic" v-if="subtopic">
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
              <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
                <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
                <!--<span class="icon-name">统计表</span>-->
            </div>
        </el-tooltip>
        <Dialog ref="summarySheets" title="企业指标分类统计">
          <tab-handover></tab-handover>
        </Dialog >
    </div>
              </div>
            </el-tooltip>
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
              <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog()" >
                <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
                <i class="el-icon-office-building icon"></i>
              </div>
            </el-tooltip>
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
              <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog()" >
                <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" class="icon">
                <!--<span class="icon-name">预报警</span>-->
              </div>
            </el-tooltip>
        </div>
    </transition>
    <Dialog ref="summarySheets" title="企业预警报警分类统计" >
      <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="企业预警报警分类统计" >
      <warn></warn>
    </Dialog>
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
      <index-statistics></index-statistics>
    </Dialog>
  </div>
</template>

<script>
import tabHandover from '@components/table/components/tabHandover'
import Dialog from '@views/popup/Dialog'
// import Dialog from '@views/popup/Dialog'
import Dialog from '../../views/popup/Dialog'
import Warn from './components/Warn'
import IndexStatistics from './components/IndexStatistics'

import '@/components/BaseNav/SolidWaste/directive/dir'

export default {
  name: 'summary-sheet.vue',
  components: {
    tabHandover,
    Dialog
    Dialog,
    Warn,
    IndexStatistics
    // Dialog
  },
  data () {
    return {
      summaryVisible: false
      summaryVisible: false,
      dialogShow: false,
      comp: Warn,
      warnVisible: false,
      companyVisible: false,
      subtopic: false
    }
  },
  methods: {
    closeBtn () {
      // const summary = document.getElementById('summary')
      // summary.style.display = 'none'
      this.$refs.summarySheets.show()
      this.summaryVisible = true
    },
    showWarnDialog () {
      this.$refs.warnDialog.show()
      this.warnVisible = true
    },
    showStatisDialog () {
      this.$refs.indexStatisticsDialog.show()
      this.companyVisible = true
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
    }
  },
  mounted () {
@@ -40,25 +90,63 @@
      this.$refs.summarySheets.$on('closeDialog', () => {
        that.summaryVisible = false
      })
      this.$refs.warnDialog.$on('closeDialog', () => {
        that.warnVisible = false
      })
      this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
        that.companyVisible = false
      })
    })
  }
}
</script>

<style scoped lang="less">
    .summary-sheets {
        position: absolute;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        z-index:500;
  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

        /*color: #fff;*/
       .el-icon-c-scale-to-original {
         width: 30px;
         height: 30px;
         font-size: 30px;
       }
  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

.summary-sheets {
  position: absolute;
  display: inline-flex;
  overflow: hidden;
  top: 0.42979rem;
  left: 0.14583rem;
  /*width: 850px;*/
  /*height: 265px;*/
  z-index: 500;
  .subtopic{
    display: inline-flex;
    .iconBtn{
      margin-left: 0.03rem;
      border-color:#DCDFE6;
      color:#fff;
    }
    .iconBtn.active-button{
      border-color:#00fff6 !important;
      color:#00fff6 !important;
    }
  }

  .dialog {
    //width: 800px;
    //height: 300px;
    position: absolute;
    top: 15%;
    left: 3rem;
  }

  /*color: #fff;*/

  .el-icon-c-scale-to-original {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }
}
</style>

 src/conf/Constants.js

@@ -20,7 +20,7 @@
  OPACITY: 1,
  DASH_ARRAY: '4,4',
  DASH_SPPED: -5,
  ICON_SIZE: [20, 20]
  ICON_SIZE: [10, 10]
}

export const props = {

 src/conf/LayerPipeLine.js

@@ -9,5 +9,6 @@
  code: 'sewersPipeLine',
  name: '管线数据',
  checked: true,
  isShow: true,
  layers: [LayerPipeLines, LayerPk, LayerArea]
}

 src/conf/LayerTopic.js

@@ -8,10 +8,14 @@
import { LayerEnvRisk } from './layers/LayerEnvRisk'
import { LayerSoilGroundWater } from './layers/LayerSoilGroundWater'
import { LayerPollutionSources } from './layers/LayerPollutionSources'
import { LayerPipeLines } from './layers/LayerPipeLines'
import { LayerArea } from './layers/LayerArea'
import { LayerVideo } from './layers/LayerVideo'

export const LayerTopic = {
  code: 'sewersTopic',
  name: '专题图层',
  checked: true,
  layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater]
  isShow: true,
  layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater, LayerPipeLines, LayerVideo, LayerArea]
}

 src/conf/MapConfig.js

@@ -2,7 +2,6 @@
import TDT from './TDT'
import { LayerSewersPoint } from './layers/LayerSewers'
import { LayerTopic } from './LayerTopic'
import { LayerPipeLine } from './LayerPipeLine'
import { LayerBasin } from './layers/LayerBasin'

const curWwwPath = window.document.location.href
@@ -43,7 +42,7 @@
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: {
    LayerSewersLine: [LayerBasin, LayerTopic, LayerPipeLine],
    LayerSewersLine: [LayerBasin, LayerTopic],
    layerSewersPoint: LayerSewersPoint
  } // 污雨水图层配置
}

 src/conf/layers/LayerBasin.js

@@ -7,6 +7,7 @@
  code: 'sewersBasin',
  name: '区域图层',
  checked: true,
  isShow: true,
  layers: [
    {
      code: 'basinCj',

 src/conf/layers/LayerEnvRisk.js

@@ -14,7 +14,8 @@
      sname: '风险统计图', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMaterial',
@@ -22,7 +23,8 @@
      sname: '物资库',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMajor',
@@ -30,7 +32,8 @@
      sname: '重大风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'red'
    },
    {
      code: 'envRiskFirst',
@@ -38,7 +41,8 @@
      sname: '一级风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'sandybrown'
    },
    {
      code: 'envRiskSecond',
@@ -46,7 +50,8 @@
      sname: '二级风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'yellow'
    }
  ]
}

 src/conf/layers/LayerVideo.js

New file
@@ -0,0 +1,8 @@
/**
 * 视频监控
 */
export const LayerVideo = {
  code: 'sewersVideo',
  name: '视频监控',
  checked: false
}

 src/views/MapTemplate.vue

@@ -10,7 +10,7 @@
    <!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
    <summary-sheets></summary-sheets>
    <enterprise></enterprise>
    <!-- <enterprise></enterprise> -->
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
    <!--    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>-->
@@ -31,7 +31,7 @@
import Popup from '@views/popup/Popup'
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
// import Enterprise from '../components/table/enterprise'
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
@@ -39,7 +39,7 @@
export default {
  name: 'MapTemplate',
  components: {
    Enterprise,
    // Enterprise,
    LegendPanel,
    // MenuSpecial,
    ToolBoxPanel,
@@ -91,6 +91,7 @@
        map: this.map
      })
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.init(this.$store.state.map.serviceLayers.layerSewersPoint)
      window.layerFactory = layerFactory

      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手