Merge remote-tracking branch 'origin/master'

YANGDL

2021-03-12 1bbce96c3e694c834a830b2c038f9303e35895b5

Merge remote-tracking branch 'origin/master'

 src/assets/images/map-pages/icon/map/company.png

 src/assets/images/map-pages/icon/map/warn.png

 src/components/LayerController/LayerController.vue

@@ -1,19 +1,17 @@
<template>
    <div class="float-panel">
        <!--    <i class="horn horn-br"></i>-->
        <!--    <i class="horn horn-bl"></i>-->
        <div class="title-text-border" @click="switchPanel">
            <div class="title-icon"></div>
            <div class="title-text">图层控制</div>
        </div>
        <transition name="el-fade-in-linear">
            <div class="body-box" id="panelContent" :style="{ width:width }">
                <div v-show="isShow">
                    <slot></slot>
                </div>
            </div>
        </transition>
  <div class="float-panel">
    <div class="title-text-border" @click="switchPanel">
      <div class="title-icon"></div>
      <div class="title-text">图层控制</div>
    </div>
    <transition name="el-fade-in-linear">
      <div class="body-box" id="panelContent" :style="{ width:width }">
        <div v-show="isShow">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
@@ -93,198 +91,198 @@

<style lang="less">

    .float-panel {
        position: absolute;
        top: 80px;
        height: auto;
        font-size: 11px;
        z-index: 1000;
.float-panel {
  position: absolute;
  top: 80px;
  height: auto;
  font-size: 11px;
  z-index: 1000;

        div {
            color: #90c8e0;
        }
  div {
    color: #90c8e0;
  }

        .title-border {
            width: 100%;
            height: 28px;
            background: #10488c;
            -webkit-clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
            clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
            position: relative;
        }
  .title-border {
    width: 100%;
    height: 28px;
    background: #10488c;
    -webkit-clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
    clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
    position: relative;
  }

        .title-border:before {
            content: "";
            display: block;
            position: absolute;
            width: 6px;
            height: 6px;
            top: 0;
            left: 0;
            background-color: #38c8ef;
        }
  .title-border:before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 0;
    left: 0;
    background-color: #38c8ef;
  }

        .title-border:after {
            content: "";
            display: block;
            position: absolute;
            width: 6px;
            height: 6px;
            top: 9px;
            right: 0;
            background-color: #38c8ef;
            -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
            clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
        }
  .title-border:after {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    top: 9px;
    right: 0;
    background-color: #38c8ef;
    -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
    clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
  }

        .title-text-border {
            width: 30px;
            height: 120px;
            float: left;
            background: #091331;
            // -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
            // clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
        }
  .title-text-border {
    width: 30px;
    height: 120px;
    float: left;
    background: #091331;
    // -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
    // clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
  }

        .title-icon {
            float: left;
            width: 22px;
            height: 22px;
            margin-top: 4px;
            margin-left: 2px;
            background-image: url(../../assets/images/map-pages/icon/setting.png);
        }
  .title-icon {
    float: left;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    margin-left: 2px;
    background-image: url(../../assets/images/map-pages/icon/setting.png);
  }

        .title-text {
            width: 25px;
            color: #00d0f9;
            font-weight: bold;
            margin-top: 6px;
            text-align: center;
            font-size: 14px;
            filter: brightness(100%);
            text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
        }
  .title-text {
    width: 25px;
    color: #00d0f9;
    font-weight: bold;
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    filter: brightness(100%);
    text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
  }

        .title-line {
            display: inline-block;
            width: 120px;
            height: 1px;
            // margin-top: 14px;
            margin-left: 4px;
            background-color: #04527f;
            line-height: 5px;
            vertical-align: middle;
        }
  .title-line {
    display: inline-block;
    width: 120px;
    height: 1px;
    // margin-top: 14px;
    margin-left: 4px;
    background-color: #04527f;
    line-height: 5px;
    vertical-align: middle;
  }

        .title-point {
            display: inline-block;
            width: 5px;
            height: 5px;
            // margin-top: 12px;
            background-color: #04527f;
            line-height: 5px;
            vertical-align: middle;
        }
  .title-point {
    display: inline-block;
    width: 5px;
    height: 5px;
    // margin-top: 12px;
    background-color: #04527f;
    line-height: 5px;
    vertical-align: middle;
  }

        .title-button {
            float: right;
            width: 28px;
            height: 28px;
            cursor: pointer;
  .title-button {
    float: right;
    width: 28px;
    height: 28px;
    cursor: pointer;

            :hover {
                font-weight: bold;
                color: white;
            }
        }

        .body-box {
            background-color: rgba(44, 62, 80, 0.6);
            border: 1px solid #10488c;
            margin-top: -1px;
            margin-left: 30px;
            height: auto;
        }

        .switch-head-up {
            width: 22px;
            height: 16px;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            cursor: pointer;
            background-image: url(../../assets/images/map-pages/icon/xljt1.png);
            transform: rotateX(0deg);
            transform-origin: 50% 50%;
            transition: transform 0.5s linear 0s;
        }

        .switch-head-down {
            transform: rotateX(180deg);
            transform-origin: 50% 50%;
            transition: transform 0.5s linear 0s;
        }

        select {
            background: transparent;
            margin: 6px;
            border: .5px solid #569EB7;
            width: 150px;
            color: #569EB7;
            padding: 0 16px;
        }

        .horn {
            width: 6px;
            height: 6px;
            float: left;
            position: absolute;
        }

        .horn-tl {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png);
            left: -1px;
            top: -1px;
        }

        .horn-tr {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png);
            right: -1px;
            top: -1px;
        }

        .horn-bl {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png);
            left: -1px;
            bottom: -1px;
        }

        .horn-br {
            background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png);
            right: -1px;
            bottom: -1px;
        }

        ::-webkit-scrollbar {
            width: 7px;
            height: 5px !important;
        }

        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #0661AE;
            border: 1px solid transparent;
        }

        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0px;
            background: #0E3565;
        }
    :hover {
      font-weight: bold;
      color: white;
    }
  }

  .body-box {
    background-color: rgba(44, 62, 80, 0.6);
    border: 1px solid #10488c;
    margin-top: -1px;
    margin-left: 30px;
    height: auto;
  }

  .switch-head-up {
    width: 22px;
    height: 16px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
    background-image: url(../../assets/images/map-pages/icon/xljt1.png);
    transform: rotateX(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
  }

  .switch-head-down {
    transform: rotateX(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
  }

  select {
    background: transparent;
    margin: 6px;
    border: .5px solid #569EB7;
    width: 150px;
    color: #569EB7;
    padding: 0 16px;
  }

  .horn {
    width: 6px;
    height: 6px;
    float: left;
    position: absolute;
  }

  .horn-tl {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png);
    left: -1px;
    top: -1px;
  }

  .horn-tr {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png);
    right: -1px;
    top: -1px;
  }

  .horn-bl {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png);
    left: -1px;
    bottom: -1px;
  }

  .horn-br {
    background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png);
    right: -1px;
    bottom: -1px;
  }

  ::-webkit-scrollbar {
    width: 7px;
    height: 5px !important;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0661AE;
    border: 1px solid transparent;
  }

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

</style>

 src/components/helpers/ServiceLayerHelper.js

@@ -140,11 +140,10 @@
     * @param res
     */
  loadGeojson (res, opt) {
    var that = this
    var icon = opt.icon
    const featureGroup = that.L.featureGroup()
    const featureGroup = this.L.featureGroup()
    const featureList = []
    const geojson = that.L.geoJSON(res.features, {
    const geojson = this.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: styles.defaultLineStyle.fill,
@@ -157,8 +156,8 @@
          dashSpeed: styles.defaultLineStyle.dashSpeed
        }
      },
      pointToLayer: function (geoJsonPoint, latlng) {
        return that.L.canvasMarker(latlng,
      pointToLayer: (geoJsonPoint, latlng) => {
        return this.L.canvasMarker(latlng,
          {
            img: {
              // url: 'assets/images/map/marker-icon.png',
@@ -167,21 +166,19 @@
            }
          })
      },
      onEachFeature: function (feature, layer) {
        console.log(feature)
        console.log(layer)
      onEachFeature: (feature, layer) => {
        featureList.push(layer)
        layer.bindPopup(function (layer) {
          that.popupComp.setDatas(layer)
          that.popupComp.setShow()
          return that.popupComp.$el
        layer.bindPopup((layer) => {
          this.popupComp.setDatas(layer)
          this.popupComp.setShow()
          return this.popupComp.$el
        }, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
          .bindTooltip(function (layer) {
          .bindTooltip((layer) => {
            const nameId = layer.feature.id
            let name = ''
            if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
@@ -194,7 +191,7 @@
            }
            return name
          }, { direction: 'bottom', offset: [0, 15], sticky: true })
          .on('mouseover', function (e) {
          .on('mouseover', (e) => {
            const type = e.target.feature.geometry.type
            if (type === 'LineString' || type === 'MultiLineString') {
              layer.setStyle({ weight: 8, color: '#00ffff' })
@@ -208,7 +205,7 @@

              layer.bringToFront()
            }
          }).on('mouseout', function (e) {
          }).on('mouseout', (e) => {
            const type = e.target.feature.geometry.type
            if (type === 'LineString' || type === 'MultiLineString') {
              layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
@@ -225,8 +222,8 @@
      }
    })
    store.commit('addSewersDatas', geojson)
    featureGroup.addTo(that.map)
    that.setZIndex(featureGroup)
    featureGroup.addTo(this.map)
    this.setZIndex(featureGroup)
    return featureGroup
  }


 src/components/panel/BaseNavMenuItem.vue

New file
@@ -0,0 +1,56 @@
<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">

          {{ item.label }}

        </el-menu-item>

      </template>

    </template>

  </div>

</template>



<script>



export default {

  name: 'BaseNavMenuItem',

  data () {

    return {}

  },

  props: {

    menuList: Array

  }

}

</script>



<style lang="less" scoped>

.base-nav-menu {

  height: 38px;

  line-height: 38px;

  display: flex;

  align-items: center;

  justify-content: space-around;

  outline: none;

  border: none;



  .el-submenu {

    .el-submenu__title {

      border-radius: 50%;



      .el-icon-arrow-down {

        display: none;

      }



    }

  }

}

</style>


 src/components/panel/ToolBoxPanel.vue

@@ -1,32 +1,33 @@
<template>
  <div class="lefttop-toolbox-panel">
    <div class="init-choose" @click="changeSelect()">
      <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
    <div>
      <div class="init-choose" @click="changeSelect()">
        <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""/>
      </div>
      <el-menu class="el-menu"
               mode="horizontal"
               :collapse="isCollapse"
               unique-opened
               @open="handleOpen"
               @close="handleClose"
               @select="handleSelect"
               v-show='selectGroup'
      >
        <base-nav-menu-item :menuList='menuList'></base-nav-menu-item>
      </el-menu>
    </div>
    <div class="el-select-dropdown" v-show='selectGroup'>
      <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total">
        <transition name="fade">
          <img :src="item.title" :title="item.alt"/>
        </transition>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'>
            <span>{{ ite.headings }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--    // 弹框-->
    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>
    <!--文字标注弹框-->
    <!--    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>-->
  </div>
</template>

<script>
import circle from '@/assets/images/map-pages/icon/toolbox/circle.png'
import fullscreen from '@/assets/images/map-pages/icon/toolbox/fullscreen.png'
import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
import location from '@/assets/images/map-pages/icon/toolbox/location.png'
import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
import square from '@/assets/images/map-pages/icon/toolbox/square.png'
// import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
// import square from '@/assets/images/map-pages/icon/toolbox/square.png'
import circle from '@assets/images/map-pages/icon/toolbox/circle.png'
import location from '@assets/images/map-pages/icon/toolbox/location.png'
import polygon from '@assets/images/map-pages/icon/toolbox/polygon.png'
import fullscreen from '@assets/images/map-pages/icon/toolbox/fullscreen.png'

// 测量的方法
import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
@@ -36,78 +37,128 @@
import MakeTation from '@components/plugin/MakeTation'

// 封装的选择弹框
import TextBounced from '@components/panel/bounced/TextBounced'
import BaseNavMenuItem from '@components/panel/BaseNavMenuItem'

export default {
  name: 'ToolBoxPanel',
  components: { TextBounced },
  components: { BaseNavMenuItem },
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      activeTools: {},
      imgLists: [
      menuList: [
        {
          title: circle,
          alt: '标绘',
          icon: circle,
          label: '标绘',
          index: '1',
          items: [
            { headings: '线标绘' },
            { headings: '面标绘' },
            { headings: '箭头标绘' }
            {
              index: '1-1',
              label: '点标绘'
            },
            {
              index: '1-2',
              label: '线标绘'
            },
            {
              index: '1-3',
              label: '面标绘',
              items: [
                {
                  index: '1-3-1',
                  label: '圆形'
                },
                {
                  index: '1-3-2',
                  label: '多边形'
                },
                {
                  index: '1-3-3',
                  label: '矩形'
                }
              ]
            }
          ]
        },
        {
          title: square,
          alt: '标注',
          icon: location,
          label: '切换底图',
          index: '2',
          items: [
            { headings: '点标注' },
            { headings: '线标注' },
            { headings: '面标注' },
            { headings: '文字标注' },
            { headings: '图标标注' }
            {
              label: '影像图',
              index: '2-1',
              items: [
                {
                  index: '2-1-1',
                  label: '影像標注'
                }
              ]
            },
            {
              label: '矢量图',
              index: '2-2',
              items: [
                {
                  index: '2-2-1',
                  label: '矢量標注'
                }
              ]
            },
            {
              label: '地形图',
              index: '2-3',
              items: [
                {
                  index: '2-3-1',
                  label: '地形標注'
                }
              ]
            }
          ]
        },
        {
          title: legend,
          alt: '测量',
          icon: polygon,
          label: '管网',
          index: '3',
          items: [
            { headings: '距离测量' },
            { headings: '面积测量' }
            {
              index: '3-1',
              label: '连通性分析'
            },
            {
              index: '3-2',
              label: '爆管分析'
            },
            {
              index: '3-3',
              label: '流向分析'
            },
            {
              index: '3-4',
              label: '横断面分析'
            }
          ]
        },
        {
          title: location,
          alt: '切换底图',
          icon: fullscreen,
          label: '下载',
          index: '4',
          items: [
            { headings: '影像图' },
            { headings: '矢量图' },
            { headings: '地形图' }
          ]
        },
        {
          title: polygon,
          alt: '管网',
          items: [
            { headings: '连通性分析' },
            { headings: '爆管分析' },
            { headings: '流向分析' },
            { headings: '横断面分析' }
          ]
        },
        {
          title: fullscreen,
          alt: '下载',
          items: [
            { headings: '全屏' },
            { headings: 'A4横向' },
            { headings: 'A4纵向' }
            {
              index: '4-1',
              label: '全屏'
            },
            {
              index: '4-2',
              label: 'A4横向'
            },
            {
              index: '4-3',
              label: 'A4纵向'
            }
          ]
        }
      ],
      form: {
        regionType: '',
        enterprise: ''
      },
      isCollapse: false,
      selectGroup: false,
      drawLayer: null,
      map: null,
@@ -117,19 +168,20 @@
    }
  },
  methods: {
    handleOpen () {
    },
    handleClose () {
    },
    handleSelect (index, indexPath) {

    },
    gitBounced (params) {
      this.bouncedText = params
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleCommand (command) {
    handleSelects (command) {
      console.log(command)
      switch (command) {
        case '全屏':
@@ -163,17 +215,17 @@
        case '线标绘':
          this.drawLayer = this.map.editTools.startPolyline()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          Measure.startMeasureLen(this.map, this.L)
          break
        case '面标绘':
          this.drawLayer = this.map.editTools.startPolygon()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '箭头标绘':
          this.drawLayer = this.map.editTools.startPolylineArrow()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
        case '多边形':
          alert('多边形')
          break
        case '点标注':
          MakeTation.StartCircleAnnotation(this.map, this.L)
        case '点标绘':
          MakeTation.StartPointAnnotation(this.map, this.L)
          break
        case '图标标注':
          this.drawLayer = this.map.editTools.startIcon()
@@ -190,93 +242,71 @@
          Measure.startMeasureArea(this.map, this.L)
          break
      }
    },
    loadData () {

    }
  },
  mounted () {
    this.loadData()
  },
  created () {

  }
}
</script>

<style lang="less">

.lefttop-toolbox-panel {
  position: absolute;
  left: 5px;
  top: 5px;
  left: 15px;
  top: 15px;
  z-index: 999;
  display: flex;

  .init-choose {
    //margin: 15px 5px;
    background: #305B62;
    //margin-top: 15px;
    width: 35px;
    height: 38px;
    border-radius: 50%;
    border: 2px skyblue solid;
  div {
    width: 100%;
    height: 55px;
    line-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
    justify-content: space-around;

  .el-select-dropdown {
    position: absolute;
    z-index: 1;
    width: 250px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #305B62;
    border-radius: 15px;
    padding-inline: 10px;
    padding-inline-start: 30px;

    .el-dropdow {
      width: 20%;
    .init-choose {
      background: #305B62;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border: 2px skyblue solid;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }

    @keyframes bounce-in {
      0% {
        transform: scale(0);
        opacity: 0.3;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .fade-enter-active {
      transform-origin: left center;
      animation: bounce-in .2s;
    }

    .fade-leave-active {
      transform-origin: left;
      animation: bounce-in .2s reverse;
    .el-menu {
      width: 80%;
      background: none;
      z-index: 1;
      border: none;
      background: #305B62;
      border-radius: 50px;
    }
  }

  .el-select-dropdown:last-child {
    margin-left: 10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
  //.transition {
  //  @keyframes bounce-in {
  //    0% {
  //      transform: scale(0);
  //      opacity: 0.3;
  //    }
  //    100% {
  //      transform: scale(1);
  //      opacity: 1;
  //    }
  //  }
  //
  //  .fade-enter-active {
  //    transform-origin: left center;
  //    animation: bounce-in .2s;
  //  }
  //
  //  .fade-leave-active {
  //    transform-origin: left;
  //    animation: bounce-in .2s reverse;
  //  }
  //}

}
</style>

 src/components/panel/bounced/TextBounced.vue

@@ -16,7 +16,7 @@
      <li class="bounced-box-choose">

        <span>颜色：</span>

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

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

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

        </select>

      </li>

    </ul>

@@ -32,8 +32,21 @@
  data () {

    return {

      bouncedText: '',

      bouncedSelect: '红色',

      selectOptions: ['红色', '蓝色', '黄色']

      bouncedSelect: 'red',

      selectOptions: [

        {

          value: 'red',

          text: '红色'

        },

        {

          value: 'blue',

          text: '蓝色'

        },

        {

          value: 'yellow',

          text: '黄色'

        }

      ]

    }

  },

  methods: {

@@ -43,6 +56,7 @@
    changeLabelTextSelect () {

      // this.bouncedSelect = item

      console.log('获取颜色')

      MakeTation.setContentColor(this.bouncedSelect)

    },

    ChangeText () {

      MakeTation.setContentText(this.bouncedText)


 src/components/plugin/DialogDrag.js

New file
@@ -0,0 +1,49 @@
import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`
        dragDom.style.top = `${t + styT}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

 src/components/plugin/Editable.js

@@ -306,16 +306,6 @@
        line.enableEdit(this.map).newShape(latlng)
        return line
      },
      // 箭头标绘
      startPolylineArrow: function (latlng, options) {
        const lineArrow = this.createPolyline([], {
          color: 'black',
          weight: 3,
          opacity: 1.0
        })
        lineArrow.enableEdit(this.map).newShape(latlng)
        return lineArrow
      },

      // 🍂method startPolygon(latlng: L.LatLng, options: hash): L.Polygon
      // Start drawing a Polygon. If `latlng` is given, a first point will be added. In any case, continuing on user click.

 src/components/plugin/MakeTation.js

@@ -20,14 +20,20 @@
    TextAnnotation.layers = L.layerGroup()

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

  },

  setContent :function (changeContent) {

    console.log(changeContent)

  // 设置改变文字内容

  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)

    // console.log(TextAnnotation.changeContent)

    let labIcon = L.divIcon({

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

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

      iconSize: [100, 40],

      iconAnchor: [0, 0],

      className: ''

@@ -52,7 +58,7 @@
}



// 添加 点 的标注

var CircleAnnotation = {

let pointAnnotation = {

  points: [],

  color: 'yellow',

  L: null,

@@ -61,54 +67,60 @@
  polyline: null,

  marker: null,

  init: function (map, L) {

    // console.log(L)

    CircleAnnotation.L = L

    CircleAnnotation.map = map

    CircleAnnotation.points = []

    CircleAnnotation.polyline = null

    CircleAnnotation.marker = null

    CircleAnnotation.layers = L.layerGroup()

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

    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) {

    // var myIcon = L.divIcon({className: 'my-div-icon'});

    let marker = L.marker(e.latlng)

    marker.addTo(CircleAnnotation.map)

    marker.addTo(pointAnnotation.map)

    // pointAnnotation.map.panBy(L.point(e.latlng))

  },

  dblclick: function (e) {

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

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

  },

  destory: function () {

    if (CircleAnnotation.polyline) {

      CircleAnnotation.map.removeLayer(CircleAnnotation.polyline)

    if (pointAnnotation.polyline) {

      pointAnnotation.map.removeLayer(pointAnnotation.polyline)

    }

    if (CircleAnnotation.marker) {

      CircleAnnotation.marker.remove()

    if (pointAnnotation.marker) {

      pointAnnotation.marker.remove()

    }

    if (CircleAnnotation.layers) {

      CircleAnnotation.layers.clearLayers()

    if (pointAnnotation.layers) {

      pointAnnotation.layers.clearLayers()

    }

  }

}



// 添加文字标注

const startMakeText = function (map, L) {

  TextAnnotation.init(map, L)

}



const StartCircleAnnotation = function (map, L) {

  CircleAnnotation.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 {

  startMakeText,

  clearText,

  StartCircleAnnotation,

  setContentText

  startMakeText,

  setContentText,

  setContentColor,

  StartPointAnnotation

}


 src/components/plugin/MeaSure.js

@@ -77,14 +77,14 @@
var distanceMeasure = {

  points: [],

// markers:[],

  color: 'red',

  color: 'blue',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  init: function (map, L) {

    console.log(L)

    // console.log(L)

    distanceMeasure.L = L

    distanceMeasure.map = map

    distanceMeasure.points = []

@@ -127,8 +127,6 @@
    console.log('双击结束', e)

    distanceMeasure.polyline.addTo(distanceMeasure.layers)

    distanceMeasure.close(e.latlng)

//distanceMeasure.polygon.enableEdit();

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

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

  },

  destory: function () {


 src/components/table/components/AirQuality.vue

New file
@@ -0,0 +1,99 @@
<template>
    <div class="AirQuality">
        <el-table
                class="tableBox"
                :data="tableData"
                :header-cell-style="tableHeaderColor"
                :cell-style="rowClass"
                border
        >
            <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">
            </el-table-column>
            <el-table-column
                    prop="AQI"
                    label="AQI"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="MajorPollutant"
                    label="首要污染物 "
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="AirQualityCategory"
                    label="空气质量类别"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="RegionalColor"
                    label="区域颜色"
                    width="200px">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
  name: 'AirQuality',
  data () {
    return {
      tableData: [{
        UserName: '集团名称',
        AQI: '',
        MajorPollutant: '',
        AirQualityCategory: '重度污染 五个',
        RegionalColor: ''
      }, {
        UserName: '北京石油',
        AQI: '152',
        MajorPollutant: '',
        AirQualityCategory: '中度污染',
        RegionalColor: '四级红色'
      }, {
        UserName: '天津石化',
        AQI: '105',
        MajorPollutant: '',
        AirQualityCategory: '轻度污染',
        RegionalColor: '三级橙色'
      }, {
        UserName: '贵州石油',
        AQI: '35',
        MajorPollutant: '',
        AirQualityCategory: '优',
        RegionalColor: '一级绿色'
      }]
    }
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    }
  }
}
</script>

<style scoped>

</style>

 src/components/table/components/IndexStatistics.vue

New file
@@ -0,0 +1,262 @@
<template>
    <el-tabs>
        <el-tab-pane label="指标统计" name="first"><el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="序号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="单位名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="工业取水量(m3)"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="外排废水量(m3)"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="工业废气排放量(m3)"
                    width="150">
            </el-table-column>
            <el-table-column label="COD(t)">
                    <el-table-column
                            prop="province"
                            label="累计产生量"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="当月产生量"
                            width="120">
                    </el-table-column>
            </el-table-column>
            <el-table-column label="氨氮(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="二氧化硫(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="氮氧化物(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="VOCs(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="固废(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="企业排名" name="second"><el-table
                :data="tableData"
                style="width: 100%"
                max-height="250">
            <el-table-column
                    fixed
                    prop="date"
                    label="企业名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="废水达标率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="废气达标率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="名次"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="传输率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="排名"
                    width="120">
            </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="排放点排名" name="third"><el-table
                :data="tableData"
                style="width: 100%"
                max-height="250">
            <el-table-column
                    fixed
                    prop="date"
                    label="排放点名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="排放类型"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="达标率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="传输率"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次"
                    width="120">
            </el-table-column>
        </el-table></el-tab-pane>
    </el-tabs>

</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

 src/components/table/components/SolidWaste.vue

New file
@@ -0,0 +1,113 @@
<template>
   <div class="Solid-Waste">
       <el-table
               class="tableBox"
               :data="tableData"
               :header-cell-style="tableHeaderColor"
               :cell-style="rowClass"
       >
           <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">
           </el-table-column>
           <el-table-column
                   prop="WasteWaters"
                   label="工业外排废水量（m³）"
                   width="200px">
           </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">
               </el-table-column>
               <el-table-column
                       prop="warning"
                       label="预警"
                       width="100px">
               </el-table-column>
           </el-table-column>
       </el-table>
   </div>
</template>

<script>
export default {
  name: 'SolidWaste',
  data () {
    return {
      tableData: [{
        UserName: '集团名称',
        WasteWaters: '',
        AddOutPut: '',
        MonthOutPut: '',
        normal: '',
        warning: ''
      }, {
        UserName: '天津石化',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
      }, {
        UserName: 'xxxx炼化3',
        WasteWaters: '116.6',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
      }, {
        UserName: 'xxxx4',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
      }]
    }
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    }
  }
}
</script>

<style scoped>
.Solid-Waste{
    width: 100%;
    height: 100%;
}
</style>

 src/components/table/components/Warn.vue

New file
@@ -0,0 +1,231 @@
<template>
    <el-tabs>
        <el-tab-pane label="实时统计" name="first">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="企业名称"
                        width="150">
                </el-table-column>
                <el-table-column label="废水(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="废气(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="固废(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="硫化氢(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="可燃气体(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="当月统计" name="second">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="企业名称"
                        width="150">
                </el-table-column>
                <el-table-column label="废水(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="废气(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="固废(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="硫化氢(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="可燃气体(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="上月统计" name="third">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="企业名称"
                        width="150">
                </el-table-column>
                <el-table-column label="废水(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="废气(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="固废(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="硫化氢(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="可燃气体(个)">
                    <el-table-column
                            prop="name"
                            label="预警"
                            width="120">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

 src/components/table/components/WasteGas.vue

New file
@@ -0,0 +1,170 @@
<template>
    <div class="Waste-water">
        <el-table
                class="tableBox"
                :data="tableData"
                :header-cell-style="tableHeaderColor"
                :cell-style="rowClass"
        >
            <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="45px"
                    type="index">
            </el-table-column>
            <el-table-column
                    prop="UserName"
                    label="企业名称"
                    width="120px">
            </el-table-column>
            <el-table-column
                    prop="WasteWaters"
                    label="工业外排废水量（m³）"
                    width="100px">
            </el-table-column>
            <el-table-column label="二氧化硫 (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="VOCs  (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">
                </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">
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
  name: 'WasteGas',
  data () {
    return {
      tableData: [{
        UserName: '集团名称',
        WasteWaters: '',
        AddOutPut: '',
        MonthOutPut: '',
        NH4NPut: '',
        NH4NMonth: '',
        normal: '',
        overProof: '',
        Abnormal: '',
        StopProduction: '',
        deficiency: ''
      }, {
        UserName: '天津石化',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        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',
        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',
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'

      }]
    }
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    }
  }
}
</script>

<style scoped>

</style>

 src/components/table/components/WasteWater.vue

New file
@@ -0,0 +1,162 @@
<template>
   <div class="waste-water">
<!--       <el-row>-->
<!--           <el-col>-->
           <el-table
                   class="tableBox"
                   :data="tableData"
                   :header-cell-style="tableHeaderColor"
                   :cell-style="rowClass"
           >
               <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="45px"
                       type="index">
               </el-table-column>
               <el-table-column
                       prop="UserName"
                       label="企业名称"
                       width="120px">
               </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">
                   </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">
                   </el-table-column>
               </el-table-column>
           </el-table>
<!--           </el-col>-->
<!--       </el-row>-->
   </div>
</template>

<script>
export default {
  name: 'WasteWater',
  data () {
    return {
      tableData: [{
        UserName: '集团名称',
        WasteWaters: '',
        AddOutPut: '',
        MonthOutPut: '',
        NH4NPut: '',
        NH4NMonth: '',
        normal: '',
        overProof: '',
        Abnormal: '',
        StopProduction: '',
        deficiency: ''
      }, {
        UserName: '天津石化',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        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',
        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',
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'

      }]
    }
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    }
  }
}
</script>

<style scoped>

</style>

 src/components/table/enterprise.vue

New file
@@ -0,0 +1,62 @@
<template>
    <div class="enterprise-panel">
        <div class="enterprise-function" @click="showWarnDialog()">
            <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" width="32px">
        </div>
        <div class="enterprise-function" @click="showStatisDialog()">
            <img src="@/assets/images/map-pages/icon/map/company.png" alt="" width="32px">
        </div>
        <Dialog ref="warnDialog" title="企业预警报警分类统计">
            <warn></warn>
        </Dialog>
        <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
            <index-statistics></index-statistics>
        </Dialog>
    </div>
</template>

<script>
import Dialog from '../../views/popup/Dialog'
import Warn from './components/Warn'
import IndexStatistics from './components/IndexStatistics'
export default {
  name: 'Enterprise',
  components: {
    Dialog,
    Warn,
    IndexStatistics
  },
  data () {
    return {
      comp: Warn
    }
  },
  methods: {
    // 图标 控制内容的展示与隐藏
    show () {
      this.legendControl = !this.legendControl
    },
    showWarnDialog () {
      this.$refs.warnDialog.show()
    },
    showStatisDialog () {
      this.$refs.indexStatisticsDialog.show()
    }
  }
}
</script>

<style lang="less" scoped>
.enterprise-panel{
    position: absolute;
    right: 5px;
    top:5px;
    z-index: 9999;

    .enterprise-function{
        width: 40px;
        float: left;
        cursor: pointer;
    }
}
</style>

 src/components/table/summarySheets.vue

New file
@@ -0,0 +1,94 @@
<template>
    <div class="summary-sheets">
        <div id="summary">
            <el-row type="flex" class="head-area" align="middle">
                <el-col>
                    <span>企业指标分类统计</span>
                </el-col>
                <el-col class="head-area-button">
                    <el-button style="float: right; padding: 3px 0" icon="el-icon-close" type="info" @click="closebtn"></el-button>
                </el-col>
            </el-row>
<!--        <el-tabs class="tabs-text">-->
            <el-row :gutter="20" class="el-rowscol">
                <el-col>
                        <el-tabs class="tabs-text" v-model="activeName" type="border-card" @tab-click="handleClick">
                                <el-tab-pane label="废水" name="first">
                                    <waste-water></waste-water>
                                </el-tab-pane>
                                <el-tab-pane label="废气" name="second">
                                    <waste-gas></waste-gas>
                                </el-tab-pane>
                                <el-tab-pane label="固废" name="third">
                                    <solid-waste></solid-waste>
                                </el-tab-pane>
                                <el-tab-pane label="空气质量" name="fourth">
                                    <AirQuality></AirQuality>
                                </el-tab-pane>
                        </el-tabs>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import WasteWater from '@/components/table/components/WasteWater.vue'
import WasteGas from './components/WasteGas'
import SolidWaste from './components/SolidWaste'
import AirQuality from './components/AirQuality'
export default {
  name: 'summary sheet.vue',
  components: {
    WasteWater,
    WasteGas,
    SolidWaste,
    AirQuality
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    closebtn () {
      const summary = document.getElementById('summary')
      summary.style.display = 'none'
      console.log(1)
    }
  }
}
</script>

<style>
    .summary-sheets {
        position: absolute;
        top: 50px;
        left: 50px;
        /*width: 850px;*/
        /*height: 265px;*/
        border: #90c8e0 1px solid;
        z-index:9999999;
        background-color: rgba(26, 73, 81, 0.901960784313726);
        /*color: #fff;*/
    }
    .head-area{
        color: #fff;
        width: 100%;
        height: 40px;
        background-color: #002433;
        font-size: 16px;
        border-bottom: #90c8e0 2px solid;
        padding-left: 16px;
        /*line-height: 40px;*/
    }
    .head-area-button{
        margin-right: 5px;
    }
    .tabs-text{
        background-color: rgba(26, 73, 81, 0.901960784313726);
    }
</style>

 src/views/MapTemplate.vue

@@ -13,6 +13,9 @@
    <tool-box-panel ref="toolBox"></tool-box-panel>
<!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
    <summary-sheets v-show="isShowbtn"></summary-sheets>
    <enterprise></enterprise>
    <el-button id="mapbtn" type="primary" icon="el-icon-c-scale-to-original" circle @click="isshowhidden"></el-button>
  </div>
</template>

@@ -25,14 +28,17 @@
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import MonitorPanel from '@components/panel/RightSearchPanel'
// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import summarySheets from '@components/table/summarySheets.vue'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'

export default {
  name: 'MapTemplate',
  components: {
    Enterprise,
    LegendPanel,
    // MenuSpecial,
    ToolBoxPanel,
@@ -41,10 +47,12 @@
    MonitorPanel,
    LcBasemap,
    LcServiceLayer,
    Popup
    Popup,
    summarySheets
  },
  data () {
    return {
      isShowbtn: false,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -63,6 +71,9 @@
    })
  },
  methods: {
    isshowhidden () {
      this.isShowbtn = !this.isShowbtn
    },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)
@@ -81,7 +92,7 @@
      this.basemapHelper.initBasemap(this.config, false) // 第二个参数，表示是否内网底图

      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
      console.log(this.$refs.popup.$el)
      console.log('-------' + this.$refs.popup.$el)
      this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup)

      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手

 src/views/popup/Dialog.vue

New file
@@ -0,0 +1,37 @@
<template>
    <el-dialog
            :title="title"
            :visible.sync="centerDialogVisible"
            width="30%"
            :modal="false"
            center>
        <slot></slot>
    </el-dialog>
</template>
<script>
// import '@/assets/css/map/map-popup.scss'

export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data () {
    return {
      centerDialogVisible: false
    }
  },
  methods: {
    show () {
      this.centerDialogVisible = true
    }
  }
}

</script>
<style lang="less">

</style>