From b1da41ef0539aeb65caa082bd2513096c898b25e Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 10 十一月 2020 18:39:24 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/css/monitor.css | 33 +-------
src/main/webapp/views/monitor/monitor.html | 150 +-----------------------------------
2 files changed, 12 insertions(+), 171 deletions(-)
diff --git a/src/main/webapp/views/monitor/css/monitor.css b/src/main/webapp/views/monitor/css/monitor.css
index f5b2c3e..61fcdbd 100644
--- a/src/main/webapp/views/monitor/css/monitor.css
+++ b/src/main/webapp/views/monitor/css/monitor.css
@@ -185,41 +185,18 @@
float: left;
width: 52%;
height: 100%;
+ padding: 2% 1%;
+ box-sizing: border-box;
}
.map-board{
- height: 86%;
- width: 100%;
- margin-top: 2%;
-}
-#map {
height: 100%;
width: 100%;
-}
-.station-list {
- height: 10%;
-}
-.station-list .outside {
- height: 100%;
- display: inline-block;
- box-sizing: border-box;
- width: 24.2%; /*todo*/
- padding: 1.5% 1%;
-}
-.station-list .inside {
- height: 100%;
- filter: Alpha(Opacity=50); /* 閽堝IE*/
- background-color: rgba(3, 36, 85, 1); /*閽堝鍏朵粬娴忚鍣�*/
border: 1px solid rgba(20, 80, 136, 1);
position: relative;
- cursor: pointer;
+ background-color: rgba(3, 36, 85, 0.5); /*閽堝鍏朵粬娴忚鍣�*/
+ filter: Alpha(Opacity=50); /* 閽堝IE*/
}
-.station-name {
- height: 100%;
- width: 100%;
- text-align: center;
- position: absolute;
- line-height: 44px;
-}
+
/*鍙�*/
/*鍙充笂*/
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index 5979ffa..23e83e1 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -115,48 +115,15 @@
<!--涓�-->
<div class="container-element-middle">
<div class="map-board">
- <div id="map">
+ <div class="inside">
+ <div class="image-border image-border1"></div>
+ <div class="image-border image-border2"></div>
+ <div class="image-border image-border3"></div>
+ <div class="image-border image-border4"></div>
+
</div>
</div>
- <div class="station-list">
- <div class="outside">
- <div class="inside">
- <div class="image-border image-border1"></div>
- <div class="image-border image-border2"></div>
- <div class="image-border image-border3"></div>
- <div class="image-border image-border4"></div>
- <div class="station-name">A</div>
- </div>
- </div>
- <div class="outside">
- <div class="inside">
- <div class="image-border image-border1"></div>
- <div class="image-border image-border2"></div>
- <div class="image-border image-border3"></div>
- <div class="image-border image-border4"></div>
- <div class="station-name">B</div>
- </div>
- </div>
- <div class="outside">
- <div class="inside">
- <div class="image-border image-border1"></div>
- <div class="image-border image-border2"></div>
- <div class="image-border image-border3"></div>
- <div class="image-border image-border4"></div>
- <div class="station-name">C</div>
- </div>
- </div>
- <div class="outside">
- <div class="inside">
- <div class="image-border image-border1"></div>
- <div class="image-border image-border2"></div>
- <div class="image-border image-border3"></div>
- <div class="image-border image-border4"></div>
- <div class="station-name">D</div>
- </div>
- </div>
- </ul>
- </div>
+
</div>
<!--鍙�-->
@@ -264,109 +231,6 @@
detailModal.style.display = 'none';
};
var data = [];
- var chart = echarts.init(document.getElementById('map'));
- var lastStationId = null;
- var defalutName = '閫掗�掑彮鍙厖鐢垫々鐩戞帶骞冲彴';
- var lastName = defalutName;
- function reload(stationId){
- data = [];
- let center = [120.307658, 30.372121];
- let param = {
- stationId: stationId
- };
- http.post("http://localhost:8080/admin/stations.action", param, function (res) {
- res.data.list.map(item => {
- data.push({
- name: item.name,
- stationId: item.stationId,
- value: [item.lon, item.lat]
- })
- });
- option = {
- backgroundColor: 'transparent',
- title: {
- text: '',
- subtext: '',
- sublink: '',
- left: 'center',
- textStyle: {
- color: '#fff'
- }
- },
- tooltip : {
- trigger: 'item'
- },
- bmap: {
- center: stationId==null?center:data[0].value,
- zoom: stationId==null?12:18,
- roam: true, // 鏄惁鍙缉鏀�
- },
- series : [
- {
- name: '',
- type: 'effectScatter',
- coordinateSystem: 'bmap',
- data: data,
- symbolSize: function () {
- return 18;
- },
- showEffectOn: 'emphasis',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: { // 鏍囩
- formatter: '{b}',
- position: 'right',
- show: false
- },
- itemStyle: {
- color: '#f4e925',
- shadowBlur: 10,
- shadowColor: '#333'
- },
- zlevel: 1
- },
- ]
- };
-
- chart.setOption(option);
-
- var bMap = chart.getModel().getComponent('bmap').getBMap();
- bMap.setMapStyle({
- style : "midnight",
- });
-
- if (stationId != null) {
- lastStationId = stationId;
- lastName = data[0].name;
- } else {
- lastStationId = null;
- lastName = defalutName;
- }
-
- }, 'form');
- }
-
- reload();
-
- chart.on('click', function (param) {
- reload(param.data.stationId);
- $('.title').html(param.data.name);
- });
-
- // 杩斿洖
- $('.button-left').click(function () {
- reload();
- $('.title').html(defalutName);
- });
- // 鍒锋柊
- $('.button-right').click(function () {
- detailModal.style.display = 'block';
- // reload(lastStationId);
- // $('.title').html(lastName);
- });
-
// 鎶樼嚎鍥�
let lineCharts = echarts.init(document.getElementById('line-charts'));
--
Gitblit v1.9.1