From 8f048024b02f0af68b43209b9ba0e66069729bc5 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 09 Jun 2021 15:01:21 +0800
Subject: [PATCH] popup弹窗加echarts
---
widgets/LeftNavigationBar/Widget.js | 2
widgets/searchTabaPopup/Widget.js | 132 +++++++++++++--------
widgets/searchTabaPopup/Widget.html | 6
widgets/SceneMode/Widget.js | 2
index.html | 2
widgets/searchTabaPopup/css/style.css | 36 ++++-
widgets/searchL/Widget.js | 156 ++++++++++++++------------
widgets/searchL/Widget.html | 15 +-
8 files changed, 209 insertions(+), 142 deletions(-)
diff --git a/index.html b/index.html
index 8afd1e2..1238bfd 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,8 @@
<!-- video flv播放 -->
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
+ <!-- echarts -->
+ <script src="libs/echarts/v4/echarts.min.js"></script>
<!-- 动态标绘 -->
<!-- <script src='libs/Cesium/ThirdParty/Workers/PlotAlgo/PlotAlgoInclude.js'></script> -->
diff --git a/widgets/LeftNavigationBar/Widget.js b/widgets/LeftNavigationBar/Widget.js
index 7a90d9d..c4a3288 100644
--- a/widgets/LeftNavigationBar/Widget.js
+++ b/widgets/LeftNavigationBar/Widget.js
@@ -134,7 +134,7 @@
}
}).then((res) => {
if (res.data.code == '200') {
- console.log(res, 'open', 898998)
+ // console.log(res, 'open', 898998)
that.changeData(res.data.data); //重写数据
}
})
diff --git a/widgets/SceneMode/Widget.js b/widgets/SceneMode/Widget.js
index 3d96cce..a4ad191 100644
--- a/widgets/SceneMode/Widget.js
+++ b/widgets/SceneMode/Widget.js
@@ -29,7 +29,7 @@
layers: {},
startup: function () {
var that = this;
- console.log(that.map, 213)
+ // console.log(that.map, 213)
$(".jimu-widget-SceneMode button").html("<img src='../../../images/2D.png' alt='' title='2D'>");
$(".jimu-widget-SceneMode button").click(function () {
diff --git a/widgets/searchL/Widget.html b/widgets/searchL/Widget.html
index 8ff8bf6..c38c7d9 100644
--- a/widgets/searchL/Widget.html
+++ b/widgets/searchL/Widget.html
@@ -13,7 +13,7 @@
</div>
<img class="input_img searchImg" src="images/addL/sous.png">
<div class="searchLMain">
- <!-- <div class="searchColce">X</div> -->
+ <div class="searchColce">X</div>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">全景</li>
@@ -24,23 +24,22 @@
<div class="layui-tab-item layui-show">
<table class="layui-hide" id="test" lay-filter="test"></table>
<div id="demoTable" style="display: none;">
- <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
- <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->
- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看全景</a>
+ <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">全景</a>
+ <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a>
</div>
</div>
<div class="layui-tab-item">
<table class="layui-hide" id="test1" lay-filter="test1"></table>
<div id="demoTable1" style="display: none;">
- <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
- <a class="layui-btn layui-btn-xs" lay-event="edit">实时视频</a>
+ <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">视频</a>
+ <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a>
</div>
</div>
<div class="layui-tab-item">
<table class="layui-hide" id="test2" lay-filter="test2"></table>
<div id="demoTable2" style="display: none;">
- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情信息</a>
- <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->
+ <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
+ <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a>
</div>
</div>
</div>
diff --git a/widgets/searchL/Widget.js b/widgets/searchL/Widget.js
index ee2e247..f73a5aa 100644
--- a/widgets/searchL/Widget.js
+++ b/widgets/searchL/Widget.js
@@ -54,11 +54,11 @@
$("#local_data").hide();
})
- // $(".searchImg").click(function () {
- // that.getInputData();
- // that.setVal(that.searchDatas);
- // $('.searchLMain').show();
- // })
+ $(".searchImg").click(function () {
+ // that.getInputData();
+ // that.setVal(that.searchDatas);
+ $('.searchLMain').show();
+ })
$(".searchColce").click(function () {
$('.searchLMain').hide();
})
@@ -119,7 +119,7 @@
},
getData: function (index) {
var d = $('.searchLMain').find('.layui-tab-item').hide;
- console.log(d)
+ // console.log(d)
var that = this,
url = index == 0 ?
'http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorRecords?name=&startTime=&endTime=&type=2&startPage=1&limit=10&soId=056c6f9fa3f14c168fa90cf1563cd01f'
@@ -187,9 +187,17 @@
resize: function () {
},
+ goOnPosition(arr) {
+ // console.log(arr)
+ this.map.camera.flyTo({
+ // destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(gaodu))
+ destination: Cesium.Cartesian3.fromDegrees(Number(arr[0]), Number(arr[1]), Number(8000))
+ });
+ },
beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
// data.push(...data)
// console.log(data)
+ var that = this;
layui.use(function () {
var element = layui.element
, table = layui.table //表格
@@ -230,9 +238,11 @@
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
// layer.msg('查看操作');
+ window.open(obj.data.panAddress);
+ console.log(obj.data.panAddress)
+ } else if (layEvent === 'edit') {
+ that.goOnPosition([obj.data.lon, obj.data.lat]);
}
- window.open(obj.data.panAddress);
- console.log(obj.data.panAddress)
});
}
if (data1 != 1) {
@@ -268,18 +278,21 @@
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
// layer.msg('查看操作');
- }
- var dom = $('#poput-m-t-video'),
- str = `<div class="title">名称：${obj.data.name}</div>
- <video id="video1" class="video-js vjs-default-skin" width="840" height="480"
- data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
- <source src="${obj.data.flv}" type="video/x-flv">
- </video>`;
- dom.empty();
- dom.append(str);
+ var dom = $('#poput-m-t-video'),
+ str = `
+ <div class="header">${obj.data.name}--实时视频</div>
+ <video id="video1" class="video-js vjs-default-skin" width="100%" height="100%"
+ data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
+ <source src="${obj.data.flv}" type="video/x-flv">
+ </video>`;
+ dom.empty();
+ dom.append(str);
- $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
- $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
+ $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
+ $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
+ } else if (layEvent === 'edit') {
+ that.goOnPosition([obj.data.lon, obj.data.lat]);
+ }
// console.log(obj.data.name)
});
}
@@ -317,60 +330,59 @@
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
// layer.msg('查看操作');
+
+ // 监测、测站详情 表格
+ var str = '';
+ var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
+ XQDom.empty();
+
+ str += '<table border="1" cellpadding="100">';
+ str += `<tr>
+ <th>测站名称：</th>
+ <td>${obj.data.name}</td>
+ <th>建设类型：</th>
+ <td>建设</td>
+ </tr>
+ <tr>
+ <th>经度：</th>
+ <td>${obj.data.lon}</td>
+ <th>纬度：</th>
+ <td>${obj.data.lat}</td>
+ </tr>
+ <tr>
+ <th>建站时间：</th>
+ <td>${obj.data.accessTime}</td>
+ <th>接入时间：</th>
+ <td>${obj.data.createTime}</td>
+ </tr>
+ <tr>
+ <th>所属保护区：</th>
+ <td>鄱阳湖南矶湿地国家级自然保护区</td>
+ <th>地址：</th>
+ <td>暂无</td>
+ </tr>
+ <tr>
+ <th>全景地址：</th>
+ <td colspan="3">${obj.data.panoramaUrl}/</td>
+ </tr>
+ <tr>
+ <th>测站简介：</th>
+ <td class="left" colspan="3">暂无</td>
+ </tr>
+ <tr>
+ <th>图片：</th>
+ <td class="left" colspan="3"></td>
+ </tr>`;
+ str += '</table>';
+ XQDom.append(str);
+
+
+ $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
+ $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
+ console.log(obj.data.name)
+ } else if (layEvent === 'edit') {
+ that.goOnPosition([obj.data.lon, obj.data.lat]);
}
- // 监测、测站详情 表格
- var str = '';
- var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
- XQDom.empty();
-
- str += '<table border="1" cellpadding="100">';
- str += `<tr>
- <th>测站名称：</th>
- <td>${obj.data.name}</td>
- <th>建设类型：</th>
- <td>建设</td>
- </tr>
- <tr>
- <th>经度：</th>
- <td>${obj.data.lon}</td>
- <th>纬度：</th>
- <td>${obj.data.lat}</td>
- </tr>
- <tr>
- <th>建站时间：</th>
- <td>${obj.data.accessTime}</td>
- <th>接入时间：</th>
- <td>${obj.data.createTime}</td>
- </tr>
- <tr>
- <th>所属保护区：</th>
- <td>鄱阳湖南矶湿地国家级自然保护区</td>
- <th>地址：</th>
- <td>暂无</td>
- </tr>
- <tr>
- <th>全景地址：</th>
- <td colspan="3">${obj.data.panoramaUrl}/</td>
- </tr>
- <tr>
- <th>测站简介：</th>
- <td class="left" colspan="3">暂无</td>
- </tr>
- <tr>
- <th>图片：</th>
- <td class="left" colspan="3"></td>
- </tr>`;
- str += '</table>';
- XQDom.append(str);
-
-
-
-
-
- $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
- $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
- console.log(obj.data.name)
-
});
}
diff --git a/widgets/searchTabaPopup/Widget.html b/widgets/searchTabaPopup/Widget.html
index 0ee1111..9381609 100644
--- a/widgets/searchTabaPopup/Widget.html
+++ b/widgets/searchTabaPopup/Widget.html
@@ -12,7 +12,7 @@
</div>
<div class="p-main three">
<div class="cloce"></div>
- <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+ <div class="layui-tab layui-tab-brief" lay-filter="popup-main">
<ul class="layui-tab-title">
<li class="layui-this">测站详情</li>
<li>实时数据</li>
@@ -137,7 +137,9 @@
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
-
+ <div style="width: 1100px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts">
+
+ </div>
</div>
<div class="layui-tab-item">空气质量数据</div>
<div class="layui-tab-item">气象数据</div>
diff --git a/widgets/searchTabaPopup/Widget.js b/widgets/searchTabaPopup/Widget.js
index 488d71a..d00b791 100644
--- a/widgets/searchTabaPopup/Widget.js
+++ b/widgets/searchTabaPopup/Widget.js
@@ -42,58 +42,9 @@
},
onOpen: function () {
- //面板打开的时候触发 （when open this panel trigger）
- // cc
-
// $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
// $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
- // var str = '';
- // var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
- // XQDom.empty();
-
- // str += '<table border="1" cellpadding="100">';
- // str += `<tr>
- // <th>测站名称：</th>
- // <td>南矶山战备湖</td>
- // <th>建设类型：</th>
- // <td>建设</td>
- // </tr>
- // <tr>
- // <th>经度：</th>
- // <td>116.280167</td>
- // <th>纬度：</th>
- // <td>28.918818</td>
- // </tr>
- // <tr>
- // <th>建站时间：</th>
- // <td>2021-05-23 09:52:48</td>
- // <th>纬度：</th>
- // <td>2021-05-23 09:52:48</td>
- // </tr>
- // <tr>
- // <th>所属保护区：</th>
- // <td>鄱阳湖南矶湿地国家级自然保护区</td>
- // <th>地址：</th>
- // <td>暂无</td>
- // </tr>
- // <tr>
- // <th>全景地址：</th>
- // <td colspan="3">北深湖(http://vr.jxpskj.com/pyhyjpt/njsdgjzrbhq/bshenh/</td>
- // </tr>
- // <tr>
- // <th>测站简介：</th>
- // <td class="left" colspan="3">南矶山保护区为国家级湿地自然保护区。位于江西省南昌市新建县南矶乡境内,由南矶山自然保护区管理站管理。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候乌及湿地生态系统。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候鸟及湿地生态系统。保护区总面积333平方千米,其中核心区面积175平方千米,缓冲区面积55平方千米,实验区面积103平方千米。
- // </td>
- // </tr>
- // <tr>
- // <th>图片：</th>
- // <td class="left" colspan="3"></td>
- // </tr>`;
- // str += '</table>';
-
- // XQDom.append(str);
-
-
+ this.creMyEcharts();
layui.use('laydate', function () {
var laydate = layui.laydate;
@@ -104,8 +55,89 @@
, range: ['#test-startDate-1', '#test-endDate-1']
});
});
+ this.getEchartsData();
},
+ myChart: '',
+ creMyEcharts: function (id) {
+ var dom = document.getElementById('popup-threse-shuiwenEcharts');
+ this.myChart = echarts.init(dom);
+ },
+ getEchartsData: function () {
+ var that = this;
+ var option;
+ console.log(this.myChart);
+
+ option = {
+ // title: {
+ // text: '折线图堆叠'
+ // },
+ dataZoom: [{
+ type: 'slider'
+ }, {
+ type: 'inside'
+ }],
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '12%',
+ containLabel: true
+ },
+ // toolbox: {
+ // feature: {
+ // saveAsImage: {}
+ // }
+ // },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '邮件营销',
+ type: 'line',
+ stack: '总量',
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: '联盟广告',
+ type: 'line',
+ stack: '总量',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '视频广告',
+ type: 'line',
+ stack: '总量',
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: '直接访问',
+ type: 'line',
+ stack: '总量',
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: '搜索引擎',
+ type: 'line',
+ stack: '总量',
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+ };
+
+ option && that.myChart.setOption(option);
+ },
onClose: function () {
//面板关闭的时候触发 （when this panel is closed trigger）
},
diff --git a/widgets/searchTabaPopup/css/style.css b/widgets/searchTabaPopup/css/style.css
index f27362a..d05e861 100644
--- a/widgets/searchTabaPopup/css/style.css
+++ b/widgets/searchTabaPopup/css/style.css
@@ -21,9 +21,9 @@
height: 600px;
/* border: 1px solid salmon; */
position: relative;
- /* border-radius: 5px; */
+ border-radius: 5px;
top: calc(50% - 300px);
- left: calc(50% - 550px);
+ left: calc(50% - 549px);
background-color: rgba(255, 255, 255, 1);
}
@@ -31,8 +31,9 @@
display: none;
width: 100%;
height: 100%;
+ position: relative;
/* border: 1px salmon solid; */
- border-radius: 5px;
+ /* border-radius: 50px !important; */
}
.jimu-widget-searchTabaPopup .p-main .cloce {
@@ -61,16 +62,35 @@
.jimu-widget-searchTabaPopup .two #poput-m-t-video{
width: 100%;
- height: 100%;
+ height: calc(100% - 40px);
/* border: 1px springgreen solid; */
- display: flex;
+ background-color: transparent;
+ /* display: flex;
align-items: center;
justify-content: center;
- flex-direction: column;
+ flex-direction: column; */
+ position: absolute;
+ top: 40px;
}
-.jimu-widget-searchTabaPopup .two #poput-m-t-video .title{
+/* .jimu-widget-searchTabaPopup .two #poput-m-t-video .title{
+ color: #409EFF;
+ width: 92%;
font-size: 25px;
- padding-bottom: 20px;
+ padding: 20px 0 8px 0;
+} */
+.jimu-widget-searchTabaPopup .two #poput-m-t-video .header{
+ background-color: #409EFF;
+ width: 100%;
+ height: 40px;
+ position: absolute;
+ font-size: 20px;
+ top: -40px;
+ left: 0;
+ color: #fff;
+ line-height: 40px;
+ border-radius: 5px 5px 0 0;
+ text-indent: 2em;
+ z-index: 14;
}
--
Gitblit v1.9.3