10 changed files with 1481 additions and 11 deletions
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 413 B |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -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); |
||||||
@ -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) |
||||||
|
}, |
||||||
|
}) |
||||||
|
})() |
||||||
@ -1,35 +1,975 @@ |
|||||||
<template> |
<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"> |
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
import "../utils/flexible" |
||||||
|
import "../utils/infoBox_min" |
||||||
export default { |
export default { |
||||||
name: "Index", |
name: "Index", |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
// 版本号 |
// 版本号 |
||||||
version: "3.8.2", |
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: { |
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 |
||||||
|
} |
||||||
|
] |
||||||
}; |
}; |
||||||
</script> |
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); |
||||||
|
|
||||||
<style scoped lang="scss"> |
// 地图样式 |
||||||
|
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> |
||||||
.app-container{ |
.app-container{ |
||||||
height: 100%; |
height: 800px; |
||||||
|
width: 100%; |
||||||
} |
} |
||||||
.network_show{ |
.network_show{ |
||||||
width: 100%; |
width: 100%; |
||||||
height: 800px; |
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> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue