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 @@
@@ -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 @@
@@ -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 @@
@@ -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> |
||||
|
||||
Loading…
Reference in new issue