From 1c6a0ab1d8fe9b49d69d299278ebb8a9d22c3085 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 09 Jun 2021 10:46:57 +0800
Subject: [PATCH] 表格 点击事件
---
widgets/searchTabaPopup/Widget.js | 90 ++++----
widgets/searchTabaPopup/Widget.html | 12
index.html | 113 +++++----
widgets/searchTabaPopup/css/style.css | 27 ++
widgets/searchL/Widget.js | 352 +++++++++++++++++++++----------
widgets/searchL/Widget.html | 24 -
6 files changed, 383 insertions(+), 235 deletions(-)
diff --git a/index.html b/index.html
index 88ca9c8..8afd1e2 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
<!DOCTYPE HTML>
<html>
-
+
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> -->
<!--jquery引用-->
@@ -19,6 +19,10 @@
<link rel="stylesheet" href="libs/layui/layui/css/layui.css">
<!-- axios -->
<script src='libs/axios/axios.js'></script>
+
+ <!-- video flv播放 -->
+ <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
+ <script src="http://vjs.zencdn.net/c/video.js"></script>
<!-- 动态标绘 -->
<!-- <script src='libs/Cesium/ThirdParty/Workers/PlotAlgo/PlotAlgoInclude.js'></script> -->
@@ -71,7 +75,7 @@
* {
box-sizing: border-box;
}
-
+
body,
html {
width: 100%;
@@ -82,32 +86,32 @@
padding: 0;
overflow: hidden;
}
-
+
.cesium-viewer-navigationContainer {
top: 90px !important;
}
-
+
.cesium-performanceDisplay {
position: relative;
right: 250px;
}
-
+
.jimu-leading-margin1 {
padding-left: 10px;
}
-
+
.cesium-baseLayerPicker-dropDown {
width: 220px !important;
}
-
+
#main-loading {
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
-
-
+
+
#main-loading #ie-note {
position: absolute;
top: 0;
@@ -116,7 +120,7 @@
right: 0;
margin: auto;
}
-
+
#main-loading #ie-note {
width: 586px;
height: 253px;
@@ -125,14 +129,14 @@
font-size: 14px;
color: #596679;
}
-
+
#ie-note .hint-title {
height: 40px;
line-height: 48px;
text-align: left;
font-weight: bold;
}
-
+
#ie-note .hint-img {
background-image: url('images/hint.png');
background-position: left;
@@ -144,25 +148,25 @@
line-height: 30px;
font-weight: bold;
}
-
+
#ie-note span {
display: block;
line-height: 14px;
}
-
+
#main-page {
display: none;
width: 100%;
height: 100%;
position: relative;
}
-
+
#jimu-layout-manager {
width: 100%;
height: 100%;
position: absolute;
}
-
+
.index_query {
position: absolute;
left: 45%;
@@ -170,7 +174,7 @@
z-index: 999;
width: 260px;
}
-
+
#mh_query li {
list-style: none;
padding-bottom: 5px;
@@ -181,9 +185,9 @@
line-height: 20px;
color: #ffffff;
cursor: pointer;
-
+
}
-
+
#mh_query {
width: 100%;
background: rgba(31, 39, 48, .7);
@@ -193,7 +197,7 @@
overflow: auto;
z-index: 999;
}
-
+
.input-sm {
width: 260px;
height: 35px;
@@ -210,26 +214,26 @@
background-color: rgba(63, 72, 84, .7);
border: none;
}
-
+
input::-webkit-input-placeholder {
color: #fff;
}
-
+
.input_img {
position: absolute;
right: 0;
height: 35px;
cursor: pointer;
}
-
+
.cesium-viewer-toolbar {
top: 55px !important;
right: -23333333333370px !important;
width: 80px;
height: 30px;
-
+
}
-
+
.cesium-viewer-toolbar .cesium-baseLayerPicker-dropDown {
position: fixed !important;
top: 54px !important;
@@ -237,28 +241,28 @@
z-index: 213 !important;
}
</style>
- <link rel="stylesheet" type="text/css" href="jimu.js/loading/loading.css"/>
+ <link rel="stylesheet" type="text/css" href="jimu.js/loading/loading.css" />
</head>
-
+
<body class="claro jimu-main-font">
-<div id="main-loading">
- <div id="app-loading"></div>
- <div id="loading-gif"></div>
- <div id="ie-note" style="display:none;">
- <div class="hint-title">Error</div>
- <div class="hint-img">Your browser is currently not supported.</div>
- <p class="hint-text">
- <span>
- 推荐chorome浏览器
- </span>
- </p>
+ <div id="main-loading">
+ <div id="app-loading"></div>
+ <div id="loading-gif"></div>
+ <div id="ie-note" style="display:none;">
+ <div class="hint-title">Error</div>
+ <div class="hint-img">Your browser is currently not supported.</div>
+ <p class="hint-text">
+ <span>
+ 推荐chorome浏览器
+ </span>
+ </p>
+ </div>
</div>
-</div>
-
-<div id="main-page">
- <div id="jimu-layout-manager"></div>
-
- <!-- <div class="index_query">
+
+ <div id="main-page">
+ <div id="jimu-layout-manager"></div>
+
+ <!-- <div class="index_query">
<div>
<input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm"
placeholder="输入关键字以搜索"/>
@@ -266,19 +270,19 @@
</div>
<div id="mh_query"></div>
</div> -->
-
-</div>
-<script src="env.js"></script>
-
-
-<script type="text/javascript" src="simpleLoader.js"></script>
-<!-- <script type="module">
+
+ </div>
+ <script src="env.js"></script>
+
+
+ <script type="text/javascript" src="simpleLoader.js"></script>
+ <!-- <script type="module">
window.CESIUM_BASE_URL = 'http://localhost:8081/gzsw3D/libs/Source';
import * as Cesium from './libs/Source/Cesium.js';
window.Cesium = Cesium;
</script> -->
-<script type="text/javascript" src="init.js"></script>
-<!-- <script>
+ <script type="text/javascript" src="init.js"></script>
+ <!-- <script>
var indData = [];
@@ -437,4 +441,5 @@
</script> -->
</body>
+
</html>
\ No newline at end of file
diff --git a/widgets/searchL/Widget.html b/widgets/searchL/Widget.html
index 3537c37..8ff8bf6 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>
@@ -30,25 +30,21 @@
</div>
</div>
<div class="layui-tab-item">
- <div class="layui-tab-item layui-show">
- <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>
- </div>
+ <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>
</div>
</div>
<div class="layui-tab-item">
- <div class="layui-tab-item layui-show">
- <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> -->
- </div>
+ <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> -->
</div>
</div>
</div>
</div>
</div>
-
+
</div>
\ No newline at end of file
diff --git a/widgets/searchL/Widget.js b/widgets/searchL/Widget.js
index 8d81497..ee2e247 100644
--- a/widgets/searchL/Widget.js
+++ b/widgets/searchL/Widget.js
@@ -54,18 +54,23 @@
$("#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();
})
- // 自动展开面板
- that.getInputData();
- that.setVal(that.searchDatas);
+ // that.getInputData();
+ // that.setVal(that.searchDatas);
+
+
+
+ // 自动展开面板 面板和搜索无关！
$('.searchLMain').show();
+
+
},
@@ -112,8 +117,59 @@
var data = d;
this.beginLayUi(data);
},
+ getData: function (index) {
+ var d = $('.searchLMain').find('.layui-tab-item').hide;
+ 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'
+ :
+ index == 1 ?
+ 'http://171.34.76.171:8880/pyh-station/video/queryPyhVideoByFilter?id=&protectAreaId=&name=&buildTime=&buildType=&start=1&limit=10'
+ :
+ index == 2 ?
+ 'http://171.34.76.171:8880/pyh-station/monitorStation/queryMonitorStationByFilter?leftTreeId=&isShow=&stcd=&stnm=&status=&startPage=1&limit=10' :
+ false
+ , token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMxMzIzMjYsImV4cCI6MTYyNTcyNDMyNn0.2ug9No32Ij3DxXCw8utXbahYsAe6l_FdzRTH5ysaBsOuKLbmQ80faGclncCdNahQ3rgiV54U-gawqw9JhGsAJA';
+
+ axios.get(url, {
+ headers: {
+ 'token': token
+ }
+ }).then((res) => {
+ if (res.status == 200) {
+ var data = res.data.data;
+ that.createDatas(data, index);
+ } else {
+ console.log('请求访问失败')
+ }
+ })
+ },
+ createDatas: function (d, n) {
+ var i = 1;
+ for (var k in d) {
+ d[k].tableId = i++;
+ }
+ var data = d;
+ if (n == 0) {
+ this.beginLayUi(data);
+ } else if (n == 1) {
+ this.beginLayUi(1, data);
+ } else if (n == 2) {
+ this.beginLayUi(1, 1, data);
+ }
+ },
onOpen: function () {
//面板打开的时候触发
+ var that = this;
+ that.getData(0)
+ layui.use('element', function () {
+ var $ = layui.jquery
+ , element = layui.element;
+ element.on('tab(docDemoTabBrief)', function (elem) {
+ that.getData(elem.index)
+ });
+ });
},
onClose: function () {
@@ -131,7 +187,7 @@
resize: function () {
},
- beginLayUi: function (data) {
+ beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
// data.push(...data)
// console.log(data)
layui.use(function () {
@@ -139,120 +195,184 @@
, table = layui.table //表格
, laypage = layui.laypage; //分页
- table.render({
- elem: '#test'
- // , url: './data'
- , height: 475
- , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
- // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
- layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
- //,curr: 5 //设定初始在第 5 页
- , groups: 3 //只显示 1 个连续页码
- , first: false //不显示首页
- , last: false //不显示尾页
- }
- , cols: [[
- { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
- , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' }
- , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' }
- , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
- , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' }
- ]],
- data: data,
- //,skin: 'line' //表格风格
- even: true
- // , page: true //是否显示分页
- , limits: false
- , limit: 10 //每页默认显示的数量
+ if (data != 1) {
- });
+ table.render({
+ elem: '#test'
+ // , url: './data'
+ , height: 475
+ , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
+ // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
+ layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
+ //,curr: 5 //设定初始在第 5 页
+ , groups: 3 //只显示 1 个连续页码
+ , first: false //不显示首页
+ , last: false //不显示尾页
+ }
+ , cols: [[
+ { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
+ , { field: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
+ , { field: 'protectArea', width: 95, align: 'center', unresize: true, title: '图层属性1' }
+ , { field: 'protectArea', width: 95, align: 'center', unresize: true, title: '图层属性2' }
+ , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' }
+ ]],
+ data: data,
+ //,skin: 'line' //表格风格
+ even: true
+ // , page: true //是否显示分页
+ , limits: false
+ , limit: 10 //每页默认显示的数量
- table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
- var data = obj.data //获得当前行数据
- , layEvent = obj.event; //获得 lay-event 对应的值
- if (layEvent === 'detail') {
- // layer.msg('查看操作');
- }
- window.open("https://www.baidu.com");
- console.log(obj)
- });
+ });
- table.render({
- elem: '#test1'
- // , url: './data'
- , height: 474
- , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
- // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
- layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
- //,curr: 5 //设定初始在第 5 页
- , groups: 3 //只显示 1 个连续页码
- , first: false //不显示首页
- , last: false //不显示尾页
- }
- , cols: [[
- { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
- , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' }
- , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' }
- , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
- , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
- ]],
- data: data,
- //,skin: 'line' //表格风格
- even: true
- // , page: true //是否显示分页
- , limits: false
- , limit: 10 //每页默认显示的数量
+ table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
+ var data = obj.data //获得当前行数据
+ , layEvent = obj.event; //获得 lay-event 对应的值
+ if (layEvent === 'detail') {
+ // layer.msg('查看操作');
+ }
+ window.open(obj.data.panAddress);
+ console.log(obj.data.panAddress)
+ });
+ }
+ if (data1 != 1) {
+ table.render({
+ elem: '#test1'
+ // , url: './data'
+ , height: 475
+ , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
+ // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
+ layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
+ //,curr: 5 //设定初始在第 5 页
+ , groups: 3 //只显示 1 个连续页码
+ , first: false //不显示首页
+ , last: false //不显示尾页
+ }
+ , cols: [[
+ { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
+ , { field: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
+ , { field: 'protectName', width: 95, align: 'center', unresize: true, title: '图层属性1' }
+ , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
+ , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
+ ]],
+ data: data1,
+ //,skin: 'line' //表格风格
+ even: true
+ // , page: true //是否显示分页
+ , limits: false
+ , limit: 10 //每页默认显示的数量
- });
- table.on('tool(test1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
- var data = obj.data //获得当前行数据
- , layEvent = obj.event; //获得 lay-event 对应的值
- if (layEvent === 'detail') {
- // layer.msg('查看操作');
- }
- $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
- $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
- console.log(obj)
- });
+ });
+ table.on('tool(test1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
+ var data = obj.data //获得当前行数据
+ , 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);
- table.render({
- elem: '#test2'
- // , url: './data'
- , height: 474
- , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
- // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
- layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
- //,curr: 5 //设定初始在第 5 页
- , groups: 3 //只显示 1 个连续页码
- , first: false //不显示首页
- , last: false //不显示尾页
- }
- , cols: [[
- { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
- , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' }
- , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' }
- , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
- , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' }
- ]],
- data: data,
- //,skin: 'line' //表格风格
- even: true
- // , page: true //是否显示分页
- , limits: false
- , limit: 10 //每页默认显示的数量
+ $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
+ $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
+ // console.log(obj.data.name)
+ });
+ }
+ if (data2 != 1) {
- });
- table.on('tool(test2)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
- var data = obj.data //获得当前行数据
- , layEvent = obj.event; //获得 lay-event 对应的值
- if (layEvent === 'detail') {
- // layer.msg('查看操作');
- }
- $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
- $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
- console.log(obj)
+ table.render({
+ elem: '#test2'
+ // , url: './data'
+ , height: 475
+ , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
+ // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
+ layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
+ //,curr: 5 //设定初始在第 5 页
+ , groups: 3 //只显示 1 个连续页码
+ , first: false //不显示首页
+ , last: false //不显示尾页
+ }
+ , cols: [[
+ { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
+ , { field: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
+ , { field: 'stcd', width: 95, align: 'center', unresize: true, title: '图层属性1' }
+ , { field: 'createTime', width: 95, align: 'center', unresize: true, title: '图层属性2' }
+ , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' }
+ ]],
+ data: data2,
+ //,skin: 'line' //表格风格
+ even: true
+ // , page: true //是否显示分页
+ , limits: false
+ , limit: 10 //每页默认显示的数量
- });
+ });
+ table.on('tool(test2)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
+ var data = obj.data //获得当前行数据
+ , 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)
+
+ });
+ }
//…
});
diff --git a/widgets/searchTabaPopup/Widget.html b/widgets/searchTabaPopup/Widget.html
index 74ee426..0ee1111 100644
--- a/widgets/searchTabaPopup/Widget.html
+++ b/widgets/searchTabaPopup/Widget.html
@@ -2,7 +2,13 @@
<div class="popup">
<div class="p-main two">
<div class="cloce"></div>
- 视频
+ <div id="poput-m-t-video">
+ <!-- <div class="title">名称：江豚湾</div>
+ <video id="video1" class="video-js vjs-default-skin" width="640" height="480"
+ data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
+ <source src="http://171.34.197.243:701/rtp/34020000001110000104_34020000001310000006.flv" type="video/x-flv">
+ </video> -->
+ </div>
</div>
<div class="p-main three">
<div class="cloce"></div>
@@ -13,7 +19,7 @@
<li>历史记录</li>
</ul>
<div class="layui-tab-content">
- <div class="layui-tab-item">
+ <div class="layui-tab-item layui-show">
<div class="xiangqing">
</div>
</div>
@@ -96,7 +102,7 @@
</div>
</div>
</div>
- <div class="layui-tab-item layui-show">
+ <div class="layui-tab-item">
<div class="lishijilv">
<div class="heard">
<div class="left">
diff --git a/widgets/searchTabaPopup/Widget.js b/widgets/searchTabaPopup/Widget.js
index b93e9ef..488d71a 100644
--- a/widgets/searchTabaPopup/Widget.js
+++ b/widgets/searchTabaPopup/Widget.js
@@ -45,53 +45,53 @@
//面板打开的时候触发 （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();
+ // $('.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>';
+ // 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);
+ // XQDom.append(str);
layui.use('laydate', function () {
diff --git a/widgets/searchTabaPopup/css/style.css b/widgets/searchTabaPopup/css/style.css
index 409c194..f27362a 100644
--- a/widgets/searchTabaPopup/css/style.css
+++ b/widgets/searchTabaPopup/css/style.css
@@ -59,6 +59,21 @@
font-size: 20px;
}
+.jimu-widget-searchTabaPopup .two #poput-m-t-video{
+ width: 100%;
+ height: 100%;
+ /* border: 1px springgreen solid; */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+.jimu-widget-searchTabaPopup .two #poput-m-t-video .title{
+ font-size: 25px;
+ padding-bottom: 20px;
+}
+
+
.jimu-widget-searchTabaPopup .layui-this {
color: #409EFF !important;
}
@@ -83,16 +98,22 @@
text-align-last: justify;
font-size: 14px;
padding: 20px;
- border-right: transparent 1px solid;
+ border-right: transparent 1px solid !important;
}
.jimu-widget-searchTabaPopup .xiangqing td {
- /* width: 30%; */
+ width: 400px;
text-align-last: right;
padding-right: 5px;
+ font-size: 14px;
+}
+.jimu-widget-searchTabaPopup .xiangqing tr:nth-child(6) td {
+ text-align-last: left;
+ text-indent: 2em;
+ padding-left: 5px;
}
-.jimu-widget-searchTabaPopup .xiangqing th, .jimu-widget-searchTabaPopup .xiangqing td {
+.jimu-widget-searchTabaPopup .xiangqing th, .jimu-widget-searchTabaPopup .xiangqing td ,.jimu-widget-searchTabaPopup .xiangqing table{
border-color: rgba(0, 0, 0, .1);
}
--
Gitblit v1.9.3