diff --git a/public/index.html b/public/index.html
index 925455c..28ba8e1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,8 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-	  <style>
+    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=HZaiURFEy1OlQMosNP8SicYPtP7zZqMz"></script>
+    <style>
     html,
     body,
     #app {
@@ -204,5 +205,6 @@
 		    <div class="load_title">正在加载系统资源，请耐心等待</div>
         </div>
 	</div>
+
   </body>
 </html>
diff --git a/src/assets/images/border.png b/src/assets/images/border.png
new file mode 100644
index 0000000..9c4d00a
Binary files /dev/null and b/src/assets/images/border.png differ
diff --git a/src/assets/images/close.png b/src/assets/images/close.png
new file mode 100644
index 0000000..a4d1ec3
Binary files /dev/null and b/src/assets/images/close.png differ
diff --git a/src/assets/images/head_bg.png b/src/assets/images/head_bg.png
new file mode 100644
index 0000000..a2e45f6
Binary files /dev/null and b/src/assets/images/head_bg.png differ
diff --git a/src/assets/images/line.png b/src/assets/images/line.png
new file mode 100644
index 0000000..05db7f8
Binary files /dev/null and b/src/assets/images/line.png differ
diff --git a/src/assets/images/marker.png b/src/assets/images/marker.png
new file mode 100644
index 0000000..6968a10
Binary files /dev/null and b/src/assets/images/marker.png differ
diff --git a/src/assets/images/tray.png b/src/assets/images/tray.png
new file mode 100644
index 0000000..b59264e
Binary files /dev/null and b/src/assets/images/tray.png differ
diff --git a/src/utils/flexible.js b/src/utils/flexible.js
new file mode 100644
index 0000000..e43d78e
--- /dev/null
+++ b/src/utils/flexible.js
@@ -0,0 +1,43 @@
+(function flexible(window, document) {
+  var docEl = document.documentElement;
+  var dpr = window.devicePixelRatio || 1;
+
+  // adjust body font size
+  function setBodyFontSize() {
+    if (document.body) {
+      document.body.style.fontSize = 12 * dpr + "px";
+    } else {
+      document.addEventListener("DOMContentLoaded", setBodyFontSize);
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit() {
+    var rem = docEl.clientWidth / 24;
+    docEl.style.fontSize = rem + "px";
+  }
+
+  setRemUnit();
+
+  // reset rem unit on page resize
+  window.addEventListener("resize", setRemUnit);
+  window.addEventListener("pageshow", function(e) {
+    if (e.persisted) {
+      setRemUnit();
+    }
+  });
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement("body");
+    var testElement = document.createElement("div");
+    testElement.style.border = ".5px solid transparent";
+    fakeBody.appendChild(testElement);
+    docEl.appendChild(fakeBody);
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add("hairlines");
+    }
+    docEl.removeChild(fakeBody);
+  }
+})(window, document);
diff --git a/src/utils/infoBox_min.js b/src/utils/infoBox_min.js
new file mode 100644
index 0000000..af76fb0
--- /dev/null
+++ b/src/utils/infoBox_min.js
@@ -0,0 +1,485 @@
+var BMapLib = (window.BMapLib = BMapLib || {})
+var INFOBOX_AT_TOP = 1,
+  INFOBOX_AT_RIGHT = 2,
+  INFOBOX_AT_BOTTOM = 3,
+  INFOBOX_AT_LEFT = 4
+;(function () {
+  var b,
+    a = (b = a || { version: '1.5.0' })
+  a.guid = '$BAIDU$'
+  ;(function () {
+    window[a.guid] = window[a.guid] || {}
+    a.lang = a.lang || {}
+    a.lang.isString = function (d) {
+      return '[object String]' == Object.prototype.toString.call(d)
+    }
+    a.lang.isFunction = function (d) {
+      return '[object Function]' == Object.prototype.toString.call(d)
+    }
+    a.lang.Event = function (d, e) {
+      this.type = d
+      this.returnValue = true
+      this.target = e || null
+      this.currentTarget = null
+    }
+    a.object = a.object || {}
+    a.extend = a.object.extend = function (f, d) {
+      for (var e in d) {
+        if (d.hasOwnProperty(e)) {
+          f[e] = d[e]
+        }
+      }
+      return f
+    }
+    a.event = a.event || {}
+    a.event._listeners = a.event._listeners || []
+    a.dom = a.dom || {}
+    a.dom._g = function (d) {
+      if (a.lang.isString(d)) {
+        return document.getElementById(d)
+      }
+      return d
+    }
+    a._g = a.dom._g
+    a.event.on = function (e, h, j) {
+      h = h.replace(/^on/i, '')
+      e = a.dom._g(e)
+      var i = function (l) {
+          j.call(e, l)
+        },
+        d = a.event._listeners,
+        g = a.event._eventFilter,
+        k,
+        f = h
+      h = h.toLowerCase()
+      if (g && g[h]) {
+        k = g[h](e, h, i)
+        f = k.type
+        i = k.listener
+      }
+      if (e.addEventListener) {
+        e.addEventListener(f, i, false)
+      } else {
+        if (e.attachEvent) {
+          e.attachEvent('on' + f, i)
+        }
+      }
+      d[d.length] = [e, h, j, i, f]
+      return e
+    }
+    a.on = a.event.on
+    a.event.un = function (f, i, e) {
+      f = a.dom._g(f)
+      i = i.replace(/^on/i, '').toLowerCase()
+      var l = a.event._listeners,
+        g = l.length,
+        h = !e,
+        k,
+        j,
+        d
+      while (g--) {
+        k = l[g]
+        if (k[1] === i && k[0] === f && (h || k[2] === e)) {
+          j = k[4]
+          d = k[3]
+          if (f.removeEventListener) {
+            f.removeEventListener(j, d, false)
+          } else {
+            if (f.detachEvent) {
+              f.detachEvent('on' + j, d)
+            }
+          }
+          l.splice(g, 1)
+        }
+      }
+      return f
+    }
+    a.un = a.event.un
+    a.dom.g = function (d) {
+      if ('string' == typeof d || d instanceof String) {
+        return document.getElementById(d)
+      } else {
+        if (d && d.nodeName && (d.nodeType == 1 || d.nodeType == 9)) {
+          return d
+        }
+      }
+      return null
+    }
+    a.g = a.G = a.dom.g
+    a.dom._styleFixer = a.dom._styleFixer || {}
+    a.dom._styleFilter = a.dom._styleFilter || []
+    a.dom._styleFilter.filter = function (e, h, j) {
+      for (var d = 0, g = a.dom._styleFilter, f; (f = g[d]); d++) {
+        if ((f = f[j])) {
+          h = f(e, h)
+        }
+      }
+      return h
+    }
+    a.string = a.string || {}
+    a.string.toCamelCase = function (d) {
+      if (d.indexOf('-') < 0 && d.indexOf('_') < 0) {
+        return d
+      }
+      return d.replace(/[-_][^-_]/g, function (e) {
+        return e.charAt(1).toUpperCase()
+      })
+    }
+    a.dom.setStyle = function (f, e, g) {
+      var h = a.dom,
+        d
+      f = h.g(f)
+      e = a.string.toCamelCase(e)
+      if ((d = h._styleFilter)) {
+        g = d.filter(e, g, 'set')
+      }
+      d = h._styleFixer[e]
+      d && d.set ? d.set(f, g) : (f.style[d || e] = g)
+      return f
+    }
+    a.setStyle = a.dom.setStyle
+    a.dom.setStyles = function (e, f) {
+      e = a.dom.g(e)
+      for (var d in f) {
+        a.dom.setStyle(e, d, f[d])
+      }
+      return e
+    }
+    a.setStyles = a.dom.setStyles
+    a.browser = a.browser || {}
+    a.browser.ie = a.ie = /msie (\d+\.\d+)/i.test(navigator.userAgent)
+      ? document.documentMode || +RegExp['\x241']
+      : undefined
+    a.dom._NAME_ATTRS = (function () {
+      var d = {
+        cellpadding: 'cellPadding',
+        cellspacing: 'cellSpacing',
+        colspan: 'colSpan',
+        rowspan: 'rowSpan',
+        valign: 'vAlign',
+        usemap: 'useMap',
+        frameborder: 'frameBorder',
+      }
+      if (a.browser.ie < 8) {
+        d['for'] = 'htmlFor'
+        d['class'] = 'className'
+      } else {
+        d.htmlFor = 'for'
+        d.className = 'class'
+      }
+      return d
+    })()
+    a.dom.setAttr = function (e, d, f) {
+      e = a.dom.g(e)
+      if ('style' == d) {
+        e.style.cssText = f
+      } else {
+        d = a.dom._NAME_ATTRS[d] || d
+        e.setAttribute(d, f)
+      }
+      return e
+    }
+    a.setAttr = a.dom.setAttr
+    a.dom.setAttrs = function (f, d) {
+      f = a.dom.g(f)
+      for (var e in d) {
+        a.dom.setAttr(f, e, d[e])
+      }
+      return f
+    }
+    a.setAttrs = a.dom.setAttrs
+    a.dom.create = function (f, d) {
+      var g = document.createElement(f),
+        e = d || {}
+      return a.dom.setAttrs(g, e)
+    }
+    b.undope = true
+  })()
+  var c = (BMapLib.InfoBox = function (f, e, d) {
+    this._content = e || ''
+    this._isOpen = false
+    this._map = f
+    this._opts = d = d || {}
+    this._opts.offset = d.offset || new BMap.Size(0, 0)
+    this._opts.boxClass = d.boxClass || 'infoBox'
+    this._opts.boxStyle = d.boxStyle || {}
+    this._opts.closeIconMargin = d.closeIconMargin || '2px'
+    this._opts.closeIconUrl = d.closeIconUrl || 'close.png'
+    this._opts.enableAutoPan = d.enableAutoPan ? true : false
+    this._opts.align = d.align || INFOBOX_AT_TOP
+  })
+  c.prototype = new BMap.Overlay()
+  c.prototype.initialize = function (e) {
+    var d = this
+    var g = (this._div = a.dom.create('div', { class: this._opts.boxClass }))
+    a.dom.setStyles(g, this._opts.boxStyle)
+    g.style.position = 'absolute'
+    this._setContent(this._content)
+    var f = e.getPanes().floatPane
+    f.style.width = 'auto'
+    f.appendChild(g)
+    this._getInfoBoxSize()
+    a.event.on(g, 'onmousedown', function (h) {
+      d._stopBubble(h)
+    })
+    a.event.on(g, 'onmouseover', function (h) {
+      d._stopBubble(h)
+    })
+    a.event.on(g, 'click', function (h) {
+      d._stopBubble(h)
+    })
+    a.event.on(g, 'dblclick', function (h) {
+      d._stopBubble(h)
+    })
+    return g
+  }
+  c.prototype.draw = function () {
+    this._isOpen && this._adjustPosition(this._point)
+  }
+  c.prototype.open = function (d) {
+    var e = this,
+      f
+    if (!this._isOpen) {
+      this._map.addOverlay(this)
+      this._isOpen = true
+      setTimeout(function () {
+        e._dispatchEvent(e, 'open', { point: e._point })
+      }, 10)
+    }
+    if (d instanceof BMap.Point) {
+      f = d
+      this._removeMarkerEvt()
+    } else {
+      if (d instanceof BMap.Marker) {
+        if (this._marker) {
+          this._removeMarkerEvt()
+        }
+        f = d.getPosition()
+        this._marker = d
+        !this._markerDragend &&
+          this._marker.addEventListener(
+            'dragend',
+            (this._markerDragend = function (g) {
+              e._point = g.point
+              e._adjustPosition(e._point)
+              e._panBox()
+              e.show()
+            })
+          )
+        !this._markerDragging &&
+          this._marker.addEventListener(
+            'dragging',
+            (this._markerDragging = function () {
+              e.hide()
+              e._point = e._marker.getPosition()
+              e._adjustPosition(e._point)
+            })
+          )
+      }
+    }
+    this.show()
+    this._point = f
+    this._panBox()
+    this._adjustPosition(this._point)
+  }
+  c.prototype.close = function () {
+    if (this._isOpen) {
+      this._map.removeOverlay(this)
+      this._remove()
+      this._isOpen = false
+      this._dispatchEvent(this, 'close', { point: this._point })
+    }
+  }
+  c.prototype.enableAutoPan = function () {
+    this._opts.enableAutoPan = true
+  }
+  c.prototype.disableAutoPan = function () {
+    this._opts.enableAutoPan = false
+  }
+  c.prototype.setContent = function (d) {
+    this._setContent(d)
+    this._getInfoBoxSize()
+    this._adjustPosition(this._point)
+  }
+  c.prototype.setPosition = function (d) {
+    this._point = d
+    this._adjustPosition(d)
+    this._removeMarkerEvt()
+  }
+  c.prototype.getPosition = function () {
+    return this._point
+  }
+  ;(c.prototype.getOffset = function () {
+    return this._opts.offset
+  }),
+    (c.prototype._remove = function () {
+      var d = this
+      if (this.domElement && this.domElement.parentNode) {
+        a.event.un(this._div.firstChild, 'click', d._closeHandler())
+        this.domElement.parentNode.removeChild(this.domElement)
+      }
+      this.domElement = null
+      this._isOpen = false
+      this.dispatchEvent('onremove')
+    }),
+    a.object.extend(c.prototype, {
+      _getCloseIcon: function () {
+        var d =
+          "<img src='" +
+          this._opts.closeIconUrl +
+          "' align='right' style='position:absolute;right:0px;cursor:pointer;margin:" +
+          this._opts.closeIconMargin +
+          "'/>"
+        return d
+      },
+      _setContent: function (e) {
+        if (!this._div) {
+          return
+        }
+        var d = this._getCloseIcon()
+        if (typeof e.nodeType === 'undefined') {
+          this._div.innerHTML = d + e
+        } else {
+          this._div.innerHTML = d
+          this._div.appendChild(e)
+        }
+        this._content = e
+        this._addEventToClose()
+      },
+      _adjustPosition: function (f) {
+        var d = this._getPointPosition(f)
+        var e = this._marker && this._marker.getIcon()
+        switch (this._opts.align) {
+          case INFOBOX_AT_TOP:
+            if (this._marker) {
+              this._div.style.bottom =
+                -(
+                  d.y -
+                  this._opts.offset.height -
+                  e.anchor.height +
+                  e.infoWindowAnchor.height
+                ) -
+                this._marker.getOffset().height +
+                2 +
+                'px'
+            } else {
+              this._div.style.bottom = -(d.y - this._opts.offset.height) + 'px'
+            }
+            break
+          case INFOBOX_AT_BOTTOM:
+            if (this._marker) {
+              this._div.style.top =
+                d.y +
+                this._opts.offset.height -
+                e.anchor.height +
+                e.infoWindowAnchor.height +
+                this._marker.getOffset().height +
+                'px'
+            } else {
+              this._div.style.top = d.y + this._opts.offset.height + 'px'
+            }
+            break
+        }
+        if (this._marker) {
+          this._div.style.left =
+            d.x -
+            e.anchor.width +
+            this._marker.getOffset().width +
+            e.infoWindowAnchor.width -
+            this._boxWidth / 2 +
+            'px'
+        } else {
+          this._div.style.left = d.x - this._boxWidth / 2 + 'px'
+        }
+      },
+      _getPointPosition: function (d) {
+        this._pointPosition = this._map.pointToOverlayPixel(d)
+        return this._pointPosition
+      },
+      _getInfoBoxSize: function () {
+        this._boxWidth = parseInt(this._div.offsetWidth, 10)
+        this._boxHeight = parseInt(this._div.offsetHeight, 10)
+      },
+      _addEventToClose: function () {
+        var d = this
+        a.event.on(this._div.firstChild, 'click', d._closeHandler())
+        this._hasBindEventClose = true
+      },
+      _closeHandler: function () {
+        var d = this
+        return function (f) {
+          d.close()
+        }
+      },
+      _stopBubble: function (d) {
+        if (d && d.stopPropagation) {
+          d.stopPropagation()
+        } else {
+          window.event.cancelBubble = true
+        }
+      },
+      _panBox: function () {
+        if (!this._opts.enableAutoPan) {
+          return
+        }
+        var i = parseInt(this._map.getContainer().offsetHeight, 10),
+          o = parseInt(this._map.getContainer().offsetWidth, 10),
+          j = this._boxHeight,
+          d = this._boxWidth
+        if (j >= i || d >= o) {
+          return
+        }
+        if (!this._map.getBounds().containsPoint(this._point)) {
+          this._map.setCenter(this._point)
+        }
+        var e = this._map.pointToPixel(this._point),
+          p,
+          m,
+          l,
+          g = d / 2 - e.x,
+          n = d / 2 + e.x - o
+        if (this._marker) {
+          var k = this._marker.getIcon()
+        }
+        switch (this._opts.align) {
+          case INFOBOX_AT_TOP:
+            var f = this._marker
+              ? k.anchor.height +
+                this._marker.getOffset().height -
+                k.infoWindowAnchor.height
+              : 0
+            p = j - e.y + this._opts.offset.height + f + 2
+            break
+          case INFOBOX_AT_BOTTOM:
+            var f = this._marker
+              ? -k.anchor.height +
+                k.infoWindowAnchor.height +
+                this._marker.getOffset().height +
+                this._opts.offset.height
+              : 0
+            m = j + e.y - i + f + 4
+            break
+        }
+        panX = g > 0 ? g : n > 0 ? -n : 0
+        l = p > 0 ? p : m > 0 ? -m : 0
+        this._map.panBy(panX, l)
+      },
+      _removeMarkerEvt: function () {
+        this._markerDragend &&
+          this._marker.removeEventListener('dragend', this._markerDragend)
+        this._markerDragging &&
+          this._marker.removeEventListener('dragging', this._markerDragging)
+        this._markerDragend = this._markerDragging = null
+      },
+      _dispatchEvent: function (d, e, g) {
+        e.indexOf('on') != 0 && (e = 'on' + e)
+        var f = new a.lang.Event(e)
+        if (!!g) {
+          for (var h in g) {
+            f[h] = g[h]
+          }
+        }
+        d.dispatchEvent(f)
+      },
+    })
+})()
diff --git a/src/views/index.vue b/src/views/index.vue
index 4fe39cc..4082ebe 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,35 +1,975 @@
 <template>
+<!--      <iframe class="network_show" name="content_frame" src="https://www.huastech.com.cn/BMap/index.html" frameborder=0  scrolling="no"></iframe>-->
   <div class="app-container">
-      <iframe class="network_show" name="content_frame" src="https://www.huastech.com.cn/BMap/index.html" frameborder=0  scrolling="no"></iframe>
+    <div id="app">
+      <div class="main">
+        <!-- 标题栏 -->
+        <header>
+          <h1>视频水位计数据监控大屏</h1>
+        </header>
+        <div class="left">
+          <!-- 实时水位 -->
+          <div class="panel feet">
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>实时水位</h2>
+            </div>
+            <div class="article">
+              <div>测站名称</div>
+              <div>更新时间</div>
+              <div>水尺数据</div>
+            </div>
+            <div class="table">
+              <div id="contain">
+                <div class="item" v-for="item in station" :key="item.id">
+                  <div>{{item.stnm}}</div>
+                  <div>{{item.startTime | guard}}</div>
+                  <div>{{item.value}}m</div>
+                </div>
+              </div>
+              <div id="vice"></div>
+            </div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+          <!-- 水位计分布 -->
+          <div class="panel dist">
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>水位计分布</h2>
+            </div>
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="showTime"></div>
+          <!-- 水位趋势 -->
+          <div class="panel line">
+            <div class="drop">
+              <div class="dropbtn">选择测站</div>
+              <div class="dropcontent">
+                <div class="item" v-for="item in showLevel" :key="item.id" @click="toggle(item)">
+                  <div class="spot" :style="{visibility: item.flag? 'visible': 'hidden'}"></div>
+                  {{item.stnm}}
+                </div>
+              </div>
+            </div>
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>水位趋势</h2>
+            </div>
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+          <!-- 设备在线状况 -->
+          <div class="panel pie">
+            <div class="title">
+              <div class="i arrow"></div>
+              <h2>设备在线状况</h2>
+            </div>
+            <div class="chart"></div>
+            <div class="panel-footer"></div>
+            <div class="blur"></div>
+          </div>
+        </div>
 
-        <!-- <el-button type="primary" >确 定</el-button> -->
+        <!-- 地图 -->
+        <div id="container" style="height: 800px;width: 100%"></div>
+        <!-- 放大图片 -->
+        <transition name="fade">
+          <div id="mask" v-show="showMask" @click="showMask = false">
+            <div id="image"></div>
+          </div>
+        </transition>
+      </div>
+    </div>
   </div>
 </template>
-
 <script>
+import echarts from 'echarts'
+import "../utils/flexible"
+import "../utils/infoBox_min"
 export default {
   name: "Index",
   data() {
     return {
       // 版本号
       version: "3.8.2",
-    };
+      // 数据接口
+      api: ' http://localhost/control-api/api/daping/station/',
+      // 图片接口
+      imgapi: 'https://www.huastech.com.cn',
+      // 接口数据
+      station: [],
+      level: {},
+      status: [],
+      dist: {
+        stnms: ['鄞州公园', '横溪镇-上街'],
+        values: [
+          { isLive: '在线', value: [1, 2]},
+          { isLive: '离线', value: [1, 1]}
+        ]
+      },
+
+      // 图表
+      echarts: [],
+      // 显示水位数据
+      showLevel: [],
+      // 地图
+      center: [121.549720, 29.814340],
+      map: null,
+      // 遮罩
+      showMask: false,
+      markers:[],
+      // 轮播定时器
+      box: null,
+      play: null,
+      flag: false,
+      // 无缝滚动
+      roll: null,
+      timer: null,
+      age: 21
+    }
+  },
+  filters: {
+    // 格式化时间
+    guard(e) {
+      return e.slice(11, 19)
+    }
+  },
+  mounted() {
+    // 间隔5分钟获取数据
+    this.getList()
+    // setInterval(this.getList(), 300000)
+    this.setMap()
+    this.setTime()
+    // 打开页面过小时,弹出警告
+    if(window.innerWidth < 1200) {
+      alert('页面过小可能影响数据显示！')
+    }
   },
   methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
+    // 获取数据
+    async getList() {
+      // 测站数据
+      fetch(this.api+'info')
+        .then(e => e.json())
+        .then(e => {
+          this.station = e
+          e.forEach(station => {
+            if(this.showLevel.some(item => item.id == station.id)) return
+            this.showLevel.push({
+              id: station.id,
+              stnm: station.stnm,
+              flag: this.showLevel.filter(e => e.flag).length<5? true: false
+            })
+          })
+
+          // 水位数据
+          let show = this.showLevel.filter(item => item.flag)
+          let id = show.length? show.map(item => item.id).join(): this.showLevel[0].id
+          fetch(this.api + 'waterLevelTrend?ids=' + id)
+            .then(e => e.json())
+            .then(e => {
+              this.level = e.data
+              this.setLine()
+            })
+            .catch(e => { console.error(e) })
+
+          this.setMarks()
+          this.playInfobox()
+          this.setTable()
+        })
+        .catch(e => { console.error(e) })
+      // 在线数据
+      fetch(this.api + 'status')
+        .then(e => e.json())
+        .then(e => {
+          this.status = e.data
+          this.setPie()
+          this.setDist()
+        })
+        .catch(e => { console.error(e) })
+
+      return this.getList
     },
-  },
+
+    // 实时时间
+    setTime() {
+      var t = null;
+      t = setTimeout(time, 1000); //開始运行
+      function time() {
+        clearTimeout(t); //清除定时器
+        var dt = new Date();
+        var y = dt.getFullYear();
+        var mt = dt.getMonth() + 1;
+        var day = dt.getDate();
+        var h = dt.getHours();
+        var m = dt.getMinutes();
+        var s = dt.getSeconds();
+        document.querySelector(".showTime").innerHTML =
+          y +
+          "年" +
+          mt +
+          "月" +
+          day +
+          "日 " +
+          h +
+          "时" +
+          m +
+          "分" +
+          s +
+          "秒";
+        t = setTimeout(time, 1000);
+      }
+    },
+
+    // 实时水位滚动
+    setTable() {
+      var table = document.querySelector('.table')
+      if(table.scrollHeight < table.clientHeight+1) return
+      var box = document.querySelector('#contain')
+      var vice = document.querySelector('#vice')
+      vice.innerHTML = box.innerHTML
+      vice.style.paddingBottom = table.clientHeight + 'px'
+      this.roll = () => {
+        if(table.scrollTop > box.scrollHeight-1) {
+          table.scrollTop = 0
+        }
+        table.scrollTop++
+      }
+      this.timer = setInterval(() => {
+        this.roll()
+      }, 50)
+      table.addEventListener('mouseenter', () => {
+        clearInterval(this.timer)
+      })
+      table.addEventListener('mouseleave', () => {
+        this.timer = setInterval(() => {
+          this.roll()
+        }, 50)
+      })
+    },
+
+    setLine() {
+      if(this.echarts[0] && this.echarts[0]._dom) {
+        this.echarts[0].dispose()
+      }
+      var myChart = echarts.init(document.querySelector(".line .chart"));
+      this.echarts[0] = myChart
+      var option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          top: "0%",
+          data: this.level.stnms,
+          textStyle: {
+            color: "hsla(200, 88%, 94%, .88)",
+            fontSize: "12"
+          }
+        },
+
+        grid: {
+          left: "10",
+          top: "30",
+          right: "10",
+          bottom: "10",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            // x轴更换数据
+            data: this.level.tms,
+            axisLabel: {
+              formatter: value => value.slice(11, 13),
+              textStyle: {
+                color: "hsla(200, 88%, 94%, .88)",
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.2)"
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            scale: true,
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            },
+            axisLabel: {
+              formatter: '{value} m',
+              textStyle: {
+                color: "hsla(200, 88%, 94%, .88)",
+                fontSize: 12
+              }
+            },
+            // 修改分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.1)"
+              }
+            }
+          }
+        ],
+        series: []
+      }
+      this.level.values.forEach((item, index) => {
+        option.series.push({
+          name: item.stnm,
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            color: 'hsl('+ (45 + index*55) + ', 96%, 55%)',
+            width: '2'
+          },
+          // 填充颜色设置
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'hsla('+ (45 + index*55) + ', 96%, 55%, .4)' // 渐变色的起始颜色
+                },
+                {
+                  offset: 0.8,
+                  color: 'hsla('+ (45 + index*55) + ', 96%, 55%, .1)' // 渐变线的结束颜色
+                }
+              ],
+              false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)"
+          },
+          // 设置拐点
+          symbol: "circle",
+          // 拐点大小
+          symbolSize: 5,
+          // 开始不显示拐点， 鼠标经过显示
+          showSymbol: false,
+          // 设置拐点颜色以及边框
+          itemStyle: {
+            color: 'hsl('+ (45 + index*55) + ', 96%, 55%)',
+            borderColor: "rgba(221, 220, 107, .1)",
+            borderWidth: 12
+          },
+          data: item.value
+        })
+      })
+      myChart.setOption(option);
+      // 4. 让图表跟随屏幕自动的去适应
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+
+    setPie() {
+      if(this.echarts[1] && this.echarts[1]._dom) {
+        this.echarts[1].dispose()
+      }
+      var myChart = echarts.init(document.querySelector(".pie .chart"));
+      this.echarts[1] = myChart
+      var option = {
+        color: [
+          'hsl(100, 96%, 55%)',
+          'hsl(0, 0%, 66%)'
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: "0%",
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: 'hsla(200, 88%, 94%, .88)',
+            fontSize: "16"
+          }
+        },
+        series: [
+          {
+            name: '设备在线状况',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 8
+            },
+            label: {
+              show: false,
+              position: 'center',
+              fontSize: 20,
+              color: '#fafafa',
+              formatter: '{c}'
+            },
+            labelLine: {
+              show: false
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '40',
+              }
+            },
+            data: this.status
+          }
+        ]
+      };
+      myChart.setOption(option);
+      // 监听浏览器缩放，图表对象调用缩放resize函数
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+
+    setDist() {
+      if(this.echarts[2] && this.echarts[2]._dom) {
+        this.echarts[2].dispose()
+      }
+      var myChart = echarts.init(document.querySelector(".dist .chart"));
+      this.echarts[2] = myChart
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: "0%",
+          textStyle: {
+            color: "hsla(200, 88%, 94%, .88)",
+            fontSize: "12"
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          minInterval: 1,
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.2)'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: "hsla(200, 88%, 94%, .88)",
+              fontSize: 12
+            }
+          }
+        },
+        yAxis: {
+          type: 'category',
+          axisLabel: {
+            textStyle: {
+              color: "hsla(200, 88%, 94%, .88)",
+              fontSize: 12
+            }
+          },
+          data: this.dist.stnms
+        },
+        series: []
+      }
+      this.dist.values.forEach((item, index) => {
+        option.series.push({
+          name: item.isLive,
+          type: 'bar',
+          stack: 'total',
+          label: {
+            show: true,
+            color: '#fff',
+            fontStyle: 'italic',
+            fontWeight: 'bold'
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          itemStyle: {
+            normal: {
+              color: index? 'hsl(0, 0%, 66%)': 'hsl(100, 96%, 55%)'
+            }
+          },
+          data: item.value
+        })
+      })
+      myChart.setOption(option);
+      // 监听浏览器缩放，图表对象调用缩放resize函数
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
+    },
+
+    setMap() {
+      if(this.map) return
+      // 地图对象
+      var map = this.map = new BMap.Map("container");
+      map.enableScrollWheelZoom(true);
+      // 定位
+      var center = new BMap.Point(this.center[0], this.center[1]);
+      // 生成地图
+      map.centerAndZoom(center, 12);
+
+      // 地图样式
+      map.setMapStyleV2({
+        styleId: '27148e6493e835dbb1bee250cffea552'
+      });
+    },
+
+    // 创建地标
+    setMarks() {
+      if(this.markers) {
+        this.markers.forEach(item => {
+          this.map.removeOverlay(item)
+        })
+        this.markers = []
+      }
+      // 标注图标
+      var ico = new BMap.Icon('../assets/images/marker.png', new BMap.Size(50, 24), { anchor: new BMap.Size(25, 12) })
+      // 创建标注
+      this.station.forEach(item => {
+        var p = new BMap.Point(item.longitude,item.latitude);
+        var marker = new BMap.Marker(p, { icon: ico })
+        this.markers.push(marker)
+        // , { icon: new BMap.Icon("../assets/images/tray.png", new BMap.Size(44, 30))}
+        this.map.addOverlay(marker);
+        // 点击地标打开窗口
+        marker.addEventListener('click', () => {
+          clearInterval(this.play)
+          this.box.close()
+          this.flag = false
+          let box = this.box = this.setInfoBox(this.map, marker, item)
+          setTimeout(() => {
+            box.close()
+            this.playInfobox()
+          }, 9999)
+        })
+      })
+    },
+
+    // 创建信息框
+    setInfoBox(map, marker, item) {
+      let htmlStr = `
+        <div style="height: 100%; position: relative;">
+          <div style="position: absolute; left: 14px; top: 33px; z-index: -1; background: hsla(200, 88%, 33%, .6); box-shadow: 0 0 16px hsl(200, 88%, 33%); width: 336px; height: 135px;"></div>
+          <div style="background: url('../assets/images/border.png') center center; width: 100%; height: 100%; color: #effaff; font-size: 18px; text-shadow: 2px 2px 4px #17263C; display: flex;">
+            <div style="flex: 1; padding: 66px 0 0 20px;">
+              <div style="height: 30px; white-space: nowrap; word-wrap: ellipsis; overflow: hidden;">站点: ${item.stnm}</div>
+              <div style="height: 30px;">水位: ${item.value}m</div>
+              <div style="white-space: pre-wrap;">时间: ${item.startTime.slice(11, 19)}</div>
+            </div>
+            <div style="flex: 1; padding: 52px 20px 40px 0;">
+              <div class="thumbnail" style="background: url('${this.imgapi + item.imgName}') center center/contain no-repeat; width: 100%; height: 100%; cursor: zoom-in"></div>
+            </div>
+          </div>
+        </div>`
+      var infobox = new BMapLib.InfoBox(map, htmlStr, {
+        boxStyle: {
+          width: "363px",
+          height: "210px"
+        },
+        closeIconUrl: '../assets/images/close.png',  //关闭按钮的url地址
+      })
+      infobox.open(marker)
+
+      // 点击缩略图展示图片
+      let img = document.querySelector('.thumbnail')
+      let i = img.style.backgroundImage
+      img.addEventListener('click', () => {
+        document.querySelector('#image').style.background = i + ' center center/contain no-repeat'
+        this.showMask = true
+      })
+
+      return infobox;
+    },
+
+    // 信息框轮播
+    playInfobox() {
+      if(this.flag) return
+      this.flag = true
+      let i = 0
+      let fn = () => {
+        if(++i >= this.station.length) {
+          i = 0
+        }
+        if(this.box) {
+          this.box.close()
+        }
+        this.box = this.setInfoBox(this.map, this.markers[i], this.station[i])
+        return fn
+      }
+      this.play = setInterval(fn(), 5555)
+    },
+
+    // 更改显示水位数据
+    toggle(e) {
+      let showMem = this.showLevel.filter(item => item.flag)
+      if(!e.flag && showMem > 4) return
+      e.flag = !e.flag
+      showMem = this.showLevel.filter(item => item.flag)
+      let id = showMem.length? showMem.map(item => item.id).join(): this.showLevel[0].id
+      fetch(this.api + 'waterLevelTrend?ids=' + id)
+        .then(e => e.json())
+        .then(e => {
+          this.level = e.data
+          this.setLine()
+        })
+        .catch(e => { console.error(e) })
+    }
+  }
 };
 </script>
 
-
-<style scoped lang="scss">
+<style scoped>
   .app-container{
-    height: 100%;
+    height: 800px;
+    width: 100%;
   }
   .network_show{
     width: 100%;
     height: 800px;
   }
+
+  :root {
+    --fz: 16;
+  }
+  @keyframes panelbg {
+    to {
+      background: url(../assets/images/line.png) rgba(255, 255, 255, 0.06);
+    }
+  }
+  @keyframes roll {
+    to {
+      transform: translateY(-30px);
+    }
+  }
+  .turn {
+    animation: roll 2s linear;
+  }
+  #mask {
+    position: fixed;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    background: hsla(0, 0%, 33%, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #mask #image {
+    width: 70%;
+    height: 70%;
+  }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.4s;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  html {
+    height: 100%;
+    min-width: 1200px;
+    min-height: 600px;
+    overflow: auto;
+  }
+  body {
+    height: 100%;
+    overflow: hidden;
+    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
+  }
+  #app {
+    height: 100%;
+    position: relative;
+  }
+  #container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  /* 去logo */
+  .BMap_cpyCtrl {
+    display: none;
+  }
+  .anchorBL {
+    display: none;
+  }
+  .main {
+    height: 100%;
+  }
+  header {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 1.25rem;
+    background: url(../assets/images/head_bg.png) no-repeat top center;
+    background-size: 100% 100%;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  header h1 {
+    font-size: 0.475rem;
+    color: hsl(0, 0%, 100%);
+    text-shadow: 0 0 4px hsl(200, 88%, 55%), 0 0 8px hsl(180, 88%, 66%);
+    text-align: center;
+    line-height: 1rem;
+  }
+  .left {
+    position: absolute;
+    z-index: 1;
+    width: 20vw;
+    height: 100%;
+    padding: 1vw;
+    background: linear-gradient(90deg, #12263E, transparent);
+    transition: opacity 1s ease-out;
+  }
+  .left .panel {
+    margin-top: 5vw;
+  }
+  .left .article {
+    color: hsla(180, 88%, 66%, 0.94);
+    font-size: 14px;
+    display: flex;
+    padding: 0.5vw 0;
+    background: hsla(200, 88%, 55%, 0.2);
+  }
+  .left .article div {
+    flex: 1;
+    padding-left: 0.5vw;
+  }
+  .left .table {
+    height: 80%;
+    overflow: hidden;
+    color: hsla(200, 88%, 94%, 0.88);
+  }
+  .left .table .item {
+    display: flex;
+    height: 22px;
+    line-height: 18px;
+    font-size: 14px;
+    padding-bottom: 4px;
+    color: hsla(200, 88%, 94%, 0.88);
+  }
+  .left .table .item div {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 0.5vw;
+  }
+  .left:hover {
+    opacity: 0.9;
+  }
+  .right {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    width: 20vw;
+    height: 100%;
+    padding: 1vw;
+    background: linear-gradient(270deg, #12263E, transparent);
+    transition: opacity 1s ease-out;
+  }
+  .right .panel {
+    margin-top: 5vw;
+  }
+  .right:hover {
+    opacity: 0.9;
+  }
+  .right .showTime {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.375rem;
+    font-size: 0.3rem;
+    color: hsla(180, 88%, 55%, 0.88);
+  }
+  .right .drop {
+    position: absolute;
+    z-index: 1;
+    right: 1.2vw;
+    top: 0.5vw;
+  }
+  .right .drop .dropbtn {
+    width: 5.4vw;
+    height: 1.6vw;
+    margin-left: auto;
+    padding-left: 0.4vw;
+    color: hsla(180, 88%, 66%, 0.94);
+    font-size: 0.9vw;
+    background: hsla(200, 88%, 55%, 0.2);
+    display: flex;
+    align-items: center;
+  }
+  .right .drop .dropcontent {
+    display: none;
+    cursor: pointer;
+    color: #fafafa;
+  }
+  .right .drop .dropcontent .item {
+    padding: 0 0.4vw 0.4vw 0;
+    background: hsla(0, 0%, 0%, 0.3);
+  }
+  .right .drop .dropcontent .item:hover {
+    background: hsla(0, 0%, 0%, 0.5);
+  }
+  .right .drop .dropcontent .item .spot {
+    display: inline-block;
+    width: 1.6vw;
+    height: 1.6vw;
+    position: relative;
+  }
+  .right .drop .dropcontent .item .spot::before {
+    content: '';
+    position: absolute;
+    left: 40%;
+    top: 60%;
+    width: 0.6vw;
+    height: 0.6vw;
+    background: hsla(180, 88%, 66%, 0.94);
+    border-radius: 50%;
+  }
+  .right .drop::before {
+    content: '';
+    position: absolute;
+    right: 0.5vw;
+    top: 0.5vw;
+    width: 0.4vw;
+    height: 0.4vw;
+    border-right: 1px solid hsla(180, 88%, 66%, 0.94);
+    border-bottom: 1px solid hsla(180, 88%, 66%, 0.94);
+    transform: rotate(45deg);
+    transition: all 0.5s;
+  }
+  .right .drop:hover::before {
+    transform: translateY(0.3vw) rotate(225deg);
+  }
+  .right .drop:hover .dropcontent {
+    display: block;
+  }
+  .panel {
+    position: relative;
+    height: 3.875rem;
+    padding: 0 0.1875rem 0.5rem;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    background: url(../assets/images/line.png) rgba(255, 255, 255, 0.03);
+    box-shadow: inset 0 0 8px 1px rgba(23, 38, 60, 0.2);
+  }
+  .panel:hover {
+    animation: panelbg 0.5s ease-out forwards;
+    box-shadow: none;
+  }
+  .panel::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border-left: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel .title {
+    display: flex;
+    align-items: center;
+  }
+  .panel .title .arrow {
+    margin-right: 0.6vw;
+    transform: rotate(270deg) scaleY(1.2);
+    background: linear-gradient(135deg, hsl(200, 88%, 66%) 33%, hsl(200, 88%, 88%) 60%);
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+  .panel .panel-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+  .panel .panel-footer::before {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 10px;
+    height: 10px;
+    border-left: 2px solid #02a6b5;
+    border-bottom: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel .panel-footer::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid #02a6b5;
+    border-bottom: 2px solid #02a6b5;
+    content: "";
+  }
+  .panel h2 {
+    height: 0.6rem;
+    color: hsl(200, 88%, 74%);
+    line-height: 0.6rem;
+    text-align: center;
+    font-size: 0.33rem;
+    font-weight: 400;
+  }
+  .panel h2 a {
+    color: #fff;
+    text-decoration: none;
+    margin: 0 0.125rem;
+  }
+  .panel .chart {
+    height: 3rem;
+  }
+  .panel .blur {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: hsla(200, 55%, 55%, 0.2);
+  }
+
 </style>