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

chenzeping

2021-03-15 ce658042246b6425bbb015c2d271e2b3f9c9d83e

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

 package.json

@@ -30,7 +30,9 @@
    "nprogress": "^0.2.0",
    "rbush": "^3.0.1",
    "screenfull": "^3.3.3",
    "style-resources-loader": "^1.4.1",
    "vue": "^2.6.11",
    "vue-cli-plugin-style-resources-loader": "^0.1.4",
    "vue-count-to": "^1.0.13",
    "vue-focus": "^2.1.0",
    "vue-fullscreen": "^2.2.0",

 public/index.html

@@ -15,5 +15,19 @@
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript">
        /* 这里我们利用了一个自执行函数 */
        (function(){
            change();
            function change(){
              console.log( document.documentElement.clientWidth*12/640 +'px')
                //html的 font-size 的大小尺寸
                //这里的html字体大小利用了一个简单的数学公式，当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/320
                document.documentElement.style.fontSize = document.documentElement.clientWidth/12 +'px';
            }
            /* 监听窗口大小发生改变时*/
            window.addEventListener('resize',change,false);
        })();
    </script>
  </body>
</html>

 src/App.vue

@@ -13,9 +13,9 @@
}
</script>

<style>
<style lang="less">
html, body, #app{
  color: #2c3e50;
  color: @color;
  height: 100vh;
  width: 100vw;
  margin: 0;
@@ -27,6 +27,7 @@
}
body{
  -ms-overflow-style: none;
  font-size: 12px;
}

</style>

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

@@ -1,4 +1,9 @@
@color:#00fff6;
@color-highlight:#fff700;
@color-gray:#C0C4CC;
@color-title:white;
@color-over:white;
@background-color:rgba(0,16,30,.8);
@background-color-light:rgba(40,50,100,.4);
@background-color-split:rgba(0,255,246,.14);
@border-radius: .03rem;

 src/assets/css/map/map-elem-ui.less

File was deleted

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

New file
@@ -0,0 +1,92 @@
@import "_map-variable";
.el-button--primary{
    color: @color;
    background-color: @background-color;
    border-color: @color;
}

.el-tabs{
  .el-tabs__item{
      padding: 0 10px;
      text-align: center;
      height: 20px;
      line-height: 20px;
  }
}
.select-down {
    border: none !important;
    background-color: @background-color ;

   //.el-scrollbar{
   //
   //     background-color: @background-color !important;
   // }
   //  .el-scrollbar__view .el-select-dropdown__list{
   //     background-color: @background-color !important;
   // }
     .el-select-dropdown__item.hover{
        background-color: @background-color-light;
    }
     .el-select-dropdown__item {
        color: @color;
        //background-color: @background-color;
    }
   //  .el-select-dropdown{
   //     border: none !important;
   //     background-color: @background-color !important;
   // }
   // .el-select-dropdown__empty{
   //     color: @color;
   //     background-color: @background-color;
   // }
    .popper__arrow::after{
        border-bottom-color: @color ;
    }


}
.map-input{
  input{
    border-radius: 0;
    background-color: @background-color-light ;
    border: solid 1px @color ;
  }
}

.map-tooltip.is-dark{
  font-size: .08333rem ;
  color: @color-highlight ;
  background: @background-color ;
  border-radius: .03rem;
  padding: .05rem ;
}
.map-btn-unactive{
  color: @color ;
  border: .00521rem solid @color ;
  box-shadow: 0 0 .03rem @color ;
}
.map-btn-active{
  color: @color-highlight ;
  border: .00521rem solid @color-highlight ;
  box-shadow: 0 0 .03rem @color-highlight ;
}
.map-btn-background{
  background: @background-color;
  //border: .00521rem solid @color;
  //box-shadow: 0 0 .03rem @color;
  //border-radius: .05208rem;
}
.map-background{
  //color: @color;
  border: .00521rem solid @color;
  box-shadow: 0 0 .03rem @color;
  background: @background-color;
  //padding: .05rem !important;
  border-radius: .05208rem;
}
.map-under-line {
  height: 1px;
  background: @background-color-split;
  margin-block-start: 0;
  margin-block-end: 0;
}

 src/assets/css/map/map-popup.less

@@ -6,12 +6,13 @@
        background-color: @background-color;
        /*background-color: transparent;*/
        border: .00521rem solid @color;
        padding: .10417rem;
        padding: .05rem;
        //-webkit-box-shadow: 0 0 0.03125rem 0 @color;
        //box-shadow: 0 0 0.03125rem 0 @color;
        -webkit-box-shadow: 0 0 10px 0 @color;
        box-shadow: 0 0 10px @color;
        border-radius: 1rem;
        box-shadow: 0 0 .03rem @color;
        //border-radius: .03rem;
        border-radius: 10px;
    }

    .leaflet-popup-tip-container {
@@ -22,15 +23,15 @@
        content: "";
        position: absolute;
        left: 50%;
        bottom: -.3rem;
        bottom: -.03rem;
        -webkit-transform: translateX(-50%) rotate(
                        45deg
        );
        transform: translateX(-50%) rotate(
                        45deg
        );
        width: .6rem;
        height: .6rem;
        width: .06rem;
        height: .06rem;
        background-color: @background-color;
        border-right: .00521rem solid @color;
        border-bottom: .00521rem solid @color;

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

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

 src/components/panel/LegendPanel.vue

@@ -1,28 +1,27 @@
<template>
  <div class="legend-panel">
    <div class="legend-icon unactive" @click="legendChange()">
      <i class="el-icon-more-outline"></i>
      <span>图例</span>
    </div>
    <transition name="fade">
      <div class="legend-content" v-show="legendControl">
      <div :class="'legend-content map-background'" v-show="legendControl">
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
          <p><span>{{ item.title }}</span></p>
          <div :class="index === 5 ? '':'map-under-line'"></div>
          <ul>
            <div v-for="(ite,inde) in item.items" :key="inde">
              <li>
            <li v-for="(ite,inde) in item.items" :key="inde">
                <img :src='ite.legendImage' alt=''>
                <span>{{ ite.legendContent }}</span>
              </li>
            </div>
          </ul>
          <div :class="index === 5 ? '':'under-line'"></div>
        </div>
      </div>
    </transition>
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="图例" placement="left">
      <div :class="this.legendControl?'legend-btn map-btn-active':'legend-btn map-btn-unactive'"
           @click="legendChange()">
        <i class="el-icon-more-outline"></i>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'LegendPanel',
@@ -32,75 +31,6 @@
      legendControl: false,
      // 图里存储数据
      legendContents: [
        {
          title: '预警',
          items: [
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨橙色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨黄色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴雨蓝色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            },
            {
              legendImage: '../.././assets/images/map-pages/setting.png',
              legendContent: '暴风红色预警'
            }
          ]
        },
        {
          title: '企业',
          items: [
@@ -214,7 +144,7 @@
}
</script>

<style lang="less" scoped>
<style lang="less">
.legend-panel {
  position: absolute;
  z-index: 502;
@@ -225,14 +155,35 @@
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  //align-items: flex-end;
  transition: all .5s;

  .legend-icon {
    width: 3.4rem;
    height: 1.6rem;
    border-radius: 0.3rem;
    background: white;
  .legend-btn {
    width: .2rem;
    height: .2rem;
    //font-size: .08333rem;
    border: .00521rem solid @background-color-light;
    border-radius: @border-radius;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: @background-color;
    margin-top: .04167rem;
    cursor: pointer;
    //color: @color;
    margin-left: auto;
    font-size: 0.08333rem;
  }

  @keyframes bounce-in {
@@ -248,72 +199,81 @@

  .fade-enter-active {
    transform-origin: right bottom;
    animation: bounce-in .5s;
    animation: bounce-in .2s;
  }

  .fade-leave-active {
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
    animation: bounce-in .2s reverse;
  }

  .legend-content {
    position: absolute;
    right: 0.3rem;
    bottom: 3rem;
    width: 30rem;
    border-radius: 1rem;
    background: #3c7699;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;

    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;

    overflow: hidden;
    min-height: 1.28646rem;

    .legend-content-box {
      font-size: 0.07292rem;
      padding: .10417rem;
      border-left: .00521rem solid @background-color-split;

      p {
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        margin: 0 !important;
        //padding: 0;
        //color: @color-title;
        -webkit-margin-before: 0.3rem;
        margin-block-start: 0.3rem;
        -webkit-margin-after: 0.2rem;
        margin-block-end: 0.2rem;
        margin-bottom: 0.05208rem !important;

        span {
          color: @color-title;
          font-size: .08333rem;
          font-weight: 600;
        }
      }

      ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0 !important;
        padding: 0 !important;;
        padding-inline: 0;

        div {
          width: 25%;
          display: flex;
          justify-content: center;
          margin: 0.1rem 0;
        font-size: .08333rem;

          li {
            width: 100%;
          list-style: none;
            display: flex;
            justify-content: space-around;
            margin-left: 15px;
            margin-right: 15px;
          -webkit-box-align: center;
          align-items: center;
          margin: 0.05208rem 0;

            img {
              height: 18px;
              width: 18px;
            width: .08333rem;
            height: .08333rem;
            margin-right: .01042rem;
            }

            span {
              width: 80px;
              font-size: 12px;
              color: white;
            }
            color: @color;
          }
        }
      }
    }

    .under-line {
      height: 2px;
      background: #7bc5ef;
      margin-block-start: 0;
      margin-block-end: 0;
    }
  }
}
</style>

 src/components/panel/MenuTopic.vue

@@ -66,7 +66,6 @@
</script>

<style lang="less" >
@import '@assets/css/map/_map-variable';
.menu-special {
  position: absolute;
  left: 1rem;

 src/components/panel/RightSearchPanel.vue

@@ -1,10 +1,22 @@
<template>
  <div id="right-panel">
  <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="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
<!--      <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
<!--      <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  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  style="   ">
<!--            <span>{{item.name}}</span>-->

<!--            <div >-->
                <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
<!--            </div>-->
          </li>
          </el-tooltip>
        </ul>
      </div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
@@ -29,7 +41,6 @@
</template>

<script>
// import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'
@@ -40,6 +51,7 @@
  components: { EnvProtectSearch, DischargeSearch },
  data () {
    return {
      isShow: true,
      topicMenu: [],
      topicList: TopicList,
      topicCheckedList: [],
@@ -52,8 +64,7 @@
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网',

      isCollapse: false
      isCollapse: true
    }
  },
  computed: {},
@@ -66,7 +77,6 @@
      this.topicList.forEach((item) => {
        this.topicCheckedList.forEach((itm) => {
          if (item.name === itm) {
            // item.checked = tr
            this.topicMenu.push(item)
          }
        })
@@ -77,7 +87,12 @@
    handleClose (done) {
      console.log(done)
    },

    selected (val) {
      console.log(val)
      this.topicList.forEach((itm) => {
        itm.checked = val.name === itm.name
      })
    },
    handlePage (page) {
    },
    handleGd () {
@@ -90,8 +105,8 @@
      // const el = document.getElementsByClassName('.btn-stretch')
      // const el2 = document.getElementsByClassName('.panel-fold-btn')
      // let  = 'btn-stretch-active'
      // var rightControl = $('#right-panel')
      // var rightControl = document.getElementById('#right-panel')
      // var rightControl = $('#panel-right')
      // var rightControl = document.getElementById('#panel-right')
      // const right = rightControl.css('right')
      // const rightit = rightControl.ownerDocument.defaultView
      // const right = rightit.getComputedStyle(rightit, null).right
@@ -130,31 +145,66 @@
</script>

<style lang="less">
@import '@assets/css/map/_map-variable';
#right-panel {
  width: 322px;
  //height: 573px;
  height: 100%;
.module-wrap{
  width: 0.15rem;
  height: 0.15rem;
  padding: .04167rem;
  //padding: .00521rem;
  background: rgba(0,16,30,.5);
  border-radius: .03125rem;
  border: .00521rem solid rgba(255,247,0,.5);
  margin: .04167rem 0;
  font-size: .08333rem;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  cursor: pointer;
  position: relative;
  line-height: 0.15rem;
  li{
    margin: 0.00521rem 0;
    text-align: center;
    img{
      width: 0.1rem;
      height: 0.1rem;

    }
  }
}
.panel-right {
  display: inline-flex;
  //width: 322px;
  //height: 100%;
  //position: absolute;
  //right: 10px;
  //top: 10px;
  height: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  top: .4rem;
  right: .08333rem;
  z-index: 501;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;

  .el-card__body {
    padding: 7px;
  }
  .el-form-item__content {
    color: rgb(52, 224, 255);
  }

  .el-picker-panel {
    background-color: #061e51 !important;
  }

  .el-input__inner {
    border-radius: 0 !important;
    background-color: #061e51 !important;
    border: solid 1px #0e639e !important;
  }
  //.el-card__body {
  //  padding: 7px;
  //}
  //.el-form-item__content {
  //  color: rgb(52, 224, 255);
  //}
  //
  //.el-picker-panel {
  //  background-color: #061e51 !important;
  //}
  //
  //.el-input__inner {
  //  border-radius: 0 !important;
  //  background-color: #061e51 !important;
  //  border: solid 1px #0e639e !important;
  //}

  .el-form-item__label {
    color: rgb(52, 224, 255);
@@ -262,8 +312,8 @@
    background-color: rgba(5,24,66,.8);
    border-radius: 10px 0 0 10px;
    .btn-stretch {
      width: 20px;
      height: 40px;
      //width: 20px;
      //height: 40px;
      background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
      cursor: pointer;
      /*margin-left: -20px;*/
@@ -285,8 +335,8 @@
  }

  .tab-item {
    width: 32px;
    height: 30px;
    //width: .2rem;
    //height: .2rem;
    color: @color;
    font-size: 12px;
    background-color: #0B3B6D;
@@ -295,13 +345,16 @@
    cursor: pointer;
  }
  .panel-tab {
    position: absolute;
    left: 0;
    //height: 120px;
    top: 0;
    width: 32px;
    position: relative;
    z-index: 500;
    background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
    margin-right: .025rem;
    .container{
      max-height: 3.125rem;
      overflow: hidden;
      position: relative;
      position: relative;
    }

  }

  .right-control {
@@ -309,11 +362,11 @@
    //height: 573px;
    height: 100%;
    position: relative;
    top: 0;
    right: 0;
    z-index: 999;
    background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    background-size: 100% 98%;
    //top: 0;
    //right: 0;
    z-index: 500;
    //background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    //background-size: 100% 98%;
  }
  .a{
    transform: translateX(328px);
@@ -352,16 +405,16 @@
    font-size: 18px;
  }

  .search-panel {
    border: #07325B;
    background-color: #07325B !important;
    margin-top: 0px;

    .el-input__inner {
      border-radius: 0px !important;
      background-color: #061e51 !important;
    }
  }
  //.search-panel {
  //  border: #07325B;
  //  background-color: #07325B !important;
  //  margin-top: 0px;
  //
  //  .el-input__inner {
  //    border-radius: 0px !important;
  //    background-color: #061e51 !important;
  //  }
  //}

  input::-webkit-input-placeholder {
    color: #569ee1;

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,12 +1,12 @@
<template>
 <div class="sewers-search">
 <div :class="'sewers-search map-background'">
    <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
      <div class="box__content" v-if="gdVisible">
        <div>
          <el-card class="search-panel">
          <div class="search-panel ">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
              <el-form-item label="设施类型：" size="mini" class="search-panel-item">
                <el-select v-model="form.pipelineType" @change="handlePipelineType"  popper-class="select-down">
                <el-select style="width: 100%" :popper-append-to-body="false" v-model="form.pipelineType" @change="handlePipelineType"  :popper-class="'select-down'">
                  <el-option
                      v-for="item in pipelineTypeOptions"
                      :key="item.value"
@@ -16,7 +16,7 @@
                </el-select>
              </el-form-item>
              <el-form-item :label="form.pipelineType+'：'" size="mini">
                <el-select v-model="form.dataType"  @change="handleDataType" popper-class="select-down">
                <el-select style="width: 100%" :popper-append-to-body="false" v-model="form.dataType"  @change="handleDataType" :popper-class="'select-down'">
                  <el-option
                      v-for="item in dataTypeOptions"
                      :key="item.value"
@@ -38,7 +38,7 @@
              <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
              <!--              </el-form-item>-->
            </el-form>
          </el-card>
          </div>
          <el-scrollbar style="height:100%">
          <el-card class="search-result" >
            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
@@ -187,6 +187,41 @@
}
</script>

<style lang="less">
@import '@assets/css/map/map-elem-ui';
<style lang="less" scoped>
.sewers-search{
  position: relative;
  width: 1.79167rem;
  height: 3.4375rem;
  overflow: hidden;
  .search-panel{
   background-color: transparent;
    border: 1px solid @background-color-split;
    padding: 10px;

    /deep/ input {
      border-radius: 0;
      background-color: @background-color-split ;
      border: solid 1px @color ;
      color: @color-gray;
      font-size: 0.01rem;
      .el-select .el-input.is-focus .el-input__inner{
        border-color: @color;
      }
    }
    /deep/ input:focus{
      border-color: @color;
    }
  }
  .search-btn{

  }
  //location-btn{
  //
  //}

  .location-btn:hover,.el-input__icon:hover{
    color: @color;
    cursor: pointer;
  }
}
</style>

 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/table/components/IndexStatistics.vue

New file
@@ -0,0 +1,263 @@
<template>
    <el-tabs v-model="activeName">
        <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 {
      activeName: 'first',
      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/Warn.vue

New file
@@ -0,0 +1,232 @@
<template>
    <el-tabs v-model="activeName">
        <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 {
      activeName: 'first',
      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/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

@@ -1,17 +1,18 @@
<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"></el-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="card" @tab-click="handleClick">
                        <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>
@@ -27,6 +28,7 @@
                        </el-tabs>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

@@ -51,6 +53,11 @@
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    closebtn () {
      const summary = document.getElementById('summary')
      summary.style.display = 'none'
      console.log(1)
    }
  }
}
@@ -58,12 +65,11 @@

<style>
    .summary-sheets {
        /*overflow: hidden;*/
        position: absolute;
        top: 50px;
        left: 50px;
        width: 850px;
        height: 265px;
        /*width: 850px;*/
        /*height: 265px;*/
        border: #90c8e0 1px solid;
        z-index:9999999;
        background-color: rgba(26, 73, 81, 0.901960784313726);
@@ -82,8 +88,7 @@
    .head-area-button{
        margin-right: 5px;
    }
    .el-rowscol{
        width: 100%;
        height: 100%;
    .tabs-text{
        background-color: rgba(26, 73, 81, 0.901960784313726);
    }
</style>

 src/conf/Topic.js

@@ -52,22 +52,4 @@
  checked: false,
  icon: '/assets/images/menu/special.png',
  comp: 'envProtectSearch'
}, {
  name: '预警报警',
  id: 8,
  checked: false,
  icon: '/assets/images/menu/special.png',
  comp: 'sewersSearch'
}, {
  name: '指标统计',
  id: 9,
  checked: false,
  icon: '/assets/images/menu/special.png',
  comp: 'envProtectSearch'
}, {
  name: '应急地图',
  id: 10,
  checked: false,
  icon: '/assets/images/menu/special.png',
  comp: 'sewersSearch'
}]

 src/main.js

@@ -8,8 +8,11 @@
import echartsDarkTheme from '@/styles/theme-dark/echarts/theme.json'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@assets/css/map/_map-variable.less'
import '@assets/css/map/map-panel-style.less'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import '@/utils/dialogDrag.js'

Vue.config.productionTip = false


 src/utils/dialogDrag.js

New file
@@ -0,0 +1,80 @@
/* eslint-disable */
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';
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

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

      const screenWidth = document.body.clientWidth // body当前宽度
      const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)

      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
      const dragDomheight = dragDom.offsetHeight // 对话框高度

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

      // 获取到的值带px 正则匹配替换
      let styL = sty(dragDom, 'left')
      let styT = sty(dragDom, 'top')

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

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

        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft)
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop)
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

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

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

 src/views/MapTemplate.vue

@@ -11,8 +11,11 @@
    <monitor-panel></monitor-panel>
    <!--        <top-enterprise-panel></top-enterprise-panel>-->
    <tool-box-panel ref="toolBox"></tool-box-panel>
    <menu-special></menu-special>
<!--    <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,26 +28,31 @@
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 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,
    // MenuSpecial,
    ToolBoxPanel,
    // TopEnterprisePanel,
    SgisLayerController,
    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)

 src/views/popup/Dialog.vue

New file
@@ -0,0 +1,37 @@
<template>
    <el-dialog  v-dialogDrag
            :title="title"
            :visible.sync="centerDialogVisible"
            width="30%"
            :modal="false"
            :close-on-click-modal="false"
            center>
        <slot></slot>
    </el-dialog>
</template>
<script>

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

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

</style>

 vue.config.js

@@ -1,5 +1,5 @@
const appConfig = require('./src/app.config')

const path = require('path')
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? `/${appConfig.projectName}/` : '/',
  configureWebpack: config => {
@@ -16,6 +16,14 @@
  },
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  productionSourceMap: false,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/css/map/_map-variable.less')
      ]
    }
  },
  devServer: {
    // host: 'localhost',
    // open: true,