From 1bbce96c3e694c834a830b2c038f9303e35895b5 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期五, 12 三月 2021 20:57:29 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 src/components/plugin/Editable.js                   |   10 
 src/components/plugin/MeaSure.js                    |    6 
 src/components/table/enterprise.vue                 |   62 +
 src/components/panel/BaseNavMenuItem.vue            |   56 +
 src/assets/images/map-pages/icon/map/warn.png       |    0 
 src/components/panel/ToolBoxPanel.vue               |  336 ++++----
 src/components/table/components/IndexStatistics.vue |  262 +++++++
 src/views/MapTemplate.vue                           |   15 
 src/components/plugin/MakeTation.js                 |   72 +
 src/components/LayerController/LayerController.vue  |  388 +++++-----
 src/components/helpers/ServiceLayerHelper.js        |   31 
 src/views/popup/Dialog.vue                          |   37 +
 src/components/table/components/SolidWaste.vue      |  113 +++
 src/assets/images/map-pages/icon/map/company.png    |    0 
 src/components/plugin/DialogDrag.js                 |   49 +
 src/components/table/summarySheets.vue              |   94 ++
 src/components/table/components/AirQuality.vue      |   99 ++
 src/components/table/components/WasteWater.vue      |  162 ++++
 src/components/table/components/WasteGas.vue        |  170 ++++
 src/components/panel/bounced/TextBounced.vue        |   20 
 src/components/table/components/Warn.vue            |  231 ++++++
 21 files changed, 1,799 insertions(+), 414 deletions(-)

diff --git a/src/assets/images/map-pages/icon/map/company.png b/src/assets/images/map-pages/icon/map/company.png
new file mode 100644
index 0000000..28a279a
--- /dev/null
+++ b/src/assets/images/map-pages/icon/map/company.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/map/warn.png b/src/assets/images/map-pages/icon/map/warn.png
new file mode 100644
index 0000000..3533b7c
--- /dev/null
+++ b/src/assets/images/map-pages/icon/map/warn.png
Binary files differ
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index e6a8076..1219e4b 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/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>
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 26bd028..6a2ff71 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/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
   }
 
diff --git a/src/components/panel/BaseNavMenuItem.vue b/src/components/panel/BaseNavMenuItem.vue
new file mode 100644
index 0000000..69330e9
--- /dev/null
+++ b/src/components/panel/BaseNavMenuItem.vue
@@ -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>
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 7e6489e..1b9fd88 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/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>
diff --git a/src/components/panel/bounced/TextBounced.vue b/src/components/panel/bounced/TextBounced.vue
index d5dde64..6ccfe85 100644
--- a/src/components/panel/bounced/TextBounced.vue
+++ b/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)
diff --git a/src/components/plugin/DialogDrag.js b/src/components/plugin/DialogDrag.js
new file mode 100644
index 0000000..2972234
--- /dev/null
+++ b/src/components/plugin/DialogDrag.js
@@ -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 姝e垯鍖归厤鏇挎崲
+      let styL, styT
+
+      // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫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
+      }
+    }
+  }
+})
diff --git a/src/components/plugin/Editable.js b/src/components/plugin/Editable.js
index bd287f5..d39de14 100644
--- a/src/components/plugin/Editable.js
+++ b/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.
diff --git a/src/components/plugin/MakeTation.js b/src/components/plugin/MakeTation.js
index 9aedc5e..189619f 100644
--- a/src/components/plugin/MakeTation.js
+++ b/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
 }
diff --git a/src/components/plugin/MeaSure.js b/src/components/plugin/MeaSure.js
index b6730f1..2c05000 100644
--- a/src/components/plugin/MeaSure.js
+++ b/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 () {
diff --git a/src/components/table/components/AirQuality.vue b/src/components/table/components/AirQuality.vue
new file mode 100644
index 0000000..b0dc855
--- /dev/null
+++ b/src/components/table/components/AirQuality.vue
@@ -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>
diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue
new file mode 100644
index 0000000..b8e8127
--- /dev/null
+++ b/src/components/table/components/IndexStatistics.vue
@@ -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>
diff --git a/src/components/table/components/SolidWaste.vue b/src/components/table/components/SolidWaste.vue
new file mode 100644
index 0000000..14a9020
--- /dev/null
+++ b/src/components/table/components/SolidWaste.vue
@@ -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="姝e父"
+                       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>
diff --git a/src/components/table/components/Warn.vue b/src/components/table/components/Warn.vue
new file mode 100644
index 0000000..31c3e3d
--- /dev/null
+++ b/src/components/table/components/Warn.vue
@@ -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>
diff --git a/src/components/table/components/WasteGas.vue b/src/components/table/components/WasteGas.vue
new file mode 100644
index 0000000..1068b8b
--- /dev/null
+++ b/src/components/table/components/WasteGas.vue
@@ -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="鎺掓斁鍙f娴嬬姸鎬�">
+                <el-table-column
+                        prop="normal"
+                        label="姝e父"
+                        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>
diff --git a/src/components/table/components/WasteWater.vue b/src/components/table/components/WasteWater.vue
new file mode 100644
index 0000000..a196886
--- /dev/null
+++ b/src/components/table/components/WasteWater.vue
@@ -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="鎺掓斁鍙f娴嬬粺璁$姸鎬�">
+                   <el-table-column
+                           prop="normal"
+                           label="姝e父"
+                           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>
diff --git a/src/components/table/enterprise.vue b/src/components/table/enterprise.vue
new file mode 100644
index 0000000..f024ad2
--- /dev/null
+++ b/src/components/table/enterprise.vue
@@ -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>
diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue
new file mode 100644
index 0000000..e4bd2ef
--- /dev/null
+++ b/src/components/table/summarySheets.vue
@@ -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>
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 363515c..4d8b9d7 100644
--- a/src/views/MapTemplate.vue
+++ b/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) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
diff --git a/src/views/popup/Dialog.vue b/src/views/popup/Dialog.vue
new file mode 100644
index 0000000..af997fd
--- /dev/null
+++ b/src/views/popup/Dialog.vue
@@ -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>

--
Gitblit v1.8.0