From df1c052d1f0d368cb78ebb1831980745bca11edc Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 10 Jun 2021 11:56:18 +0800
Subject: [PATCH] 数据图表的查询渲染
---
widgets/searchL/Widget.js | 361 +++++++++++++++++++++++++++++++++------------------
1 files changed, 235 insertions(+), 126 deletions(-)
diff --git a/widgets/searchL/Widget.js b/widgets/searchL/Widget.js
index f73a5aa..43880d5 100644
--- a/widgets/searchL/Widget.js
+++ b/widgets/searchL/Widget.js
@@ -55,29 +55,43 @@
})
$(".searchImg").click(function () {
- // that.getInputData();
- // that.setVal(that.searchDatas);
- $('.searchLMain').show();
+ // console.log(2324345)
+ that.getInputData();
+ // console.log(that.searchDatas)
+ if (typeof that.searchDatas == 'string') {
+ var han = /^[\u4e00-\u9fa5]+$/;
+ if (han.test(that.searchDatas) || that.searchDatas == ' ') {
+ that.getData(0, that.searchDatas);
+ $('.searchLMain').show();
+ } else {
+ layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
+ //得到各种内置组件
+ var layer = layui.layer //弹层
+ // layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
+ layer.tips('请先填写关键字', '.searchImg', {
+ tips: [2, '#FF5722']
+ });
+ })
+ $('.searchLMain').hide();
+ }
+ } else {
+ if (that.searchDatas[0] && that.searchDatas[1]) {
+ console.log(that.searchDatas);
+ } else {
+ layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
+ //得到各种内置组件
+ var layer = layui.layer //弹层
+ // layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
+ layer.tips('请先填写完整坐标', '.searchImg', {
+ tips: [2, '#FF5722']
+ });
+ })
+ }
+ }
})
$(".searchColce").click(function () {
$('.searchLMain').hide();
})
- // that.getInputData();
- // that.setVal(that.searchDatas);
-
-
-
- // 自动展开面板 面板和搜索无关！
- $('.searchLMain').show();
-
-
-
- },
-
- closeToolBox: function (item) {
- // if (item != this.name) {
- // $('.tool-y-box').hide();
- // }
},
getInputData: function () {
@@ -87,76 +101,63 @@
this.searchDatas = [$('#local_data1').val(), $('#local_data2').val()];
}
},
- setVal: function (val) {
- var that = this;
- if (typeof val == "string") {
- var url = 'http://171.34.76.171:8880/pyh-wetResource/GeoData/queryGeoData?name=' + val + '&protectAreald=&type=0&dataSort=1',
- token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMxMTYwMzYsImV4cCI6MTYyNTcwODAzNn0.p2qqmcWrC9QDLAFgu1n0eR4k4wrr3udFKKhjBqGJXAzz1jdR57agyyYMsTZPXIPkH7hviE64uHLW8T7fM_VvNw';
-
- axios.get(url, {
- headers: {
- 'token': token
- }
- }).then((res) => {
- if (res.status == 200) {
- var data = res.data.data;
- that.createData(data);
- } else {
- console.log('请求访问失败')
- }
- })
- } else if (typeof val == "object") {
-
- }
- },
- createData: function (d) {
- var i = 1;
- for (var k in d) {
- d[k].tableId = i++;
- }
- var data = d;
- this.beginLayUi(data);
- },
- getData: function (index) {
+ getData: function (index, val) {
+ val = val == ' ' ? '' : val;
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';
+ url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=${val}&start&limit&type=${index}`
+ // url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=&start&limit&type=${index}`
+ , token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyMjU5OTcsImV4cCI6MTYyNTgxNzk5N30.zWpoKa5AK7xLIPNm-CXoHY9D5kpk9AiUTGkuAQOZi2Rdl2BfroT4IqxjBpyUPZlgwCjG2CoJqy_7rnnodpmqNw';
axios.get(url, {
headers: {
'token': token
}
}).then((res) => {
- if (res.status == 200) {
- var data = res.data.data;
- that.createDatas(data, index);
+ if (res.data.code == 200) {
+ var data = res.data.data.panoramaList || res.data.data.stationList || res.data.data.videoList || [];
+ // console.log(data)
+
+ var val = index;//数据的2和1对调
+ if (index == 1) {
+ val = 2;
+ } else if (index == 2) {
+ val = 1;
+ }
+
+ that.createDatas(data, val);
} 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);
+ this.map.entities.removeAll();//清除图标点
+ if (d == []) {
+ if (n == 0) {
+ this.beginLayUi(d);
+ } else if (n == 1) {
+ this.beginLayUi(1, d);
+ } else if (n == 2) {
+ this.beginLayUi(1, 1, d);
+ }
+ } else {
+ var i = 1;
+ for (var k in d) {
+ d[k].tableId = i++;
+ //赋图标点
+ this.shiti(d[k], +n + 1);
+ }
+ var data = d;
+ console.log(data)
+ 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 () {
@@ -167,7 +168,15 @@
var $ = layui.jquery
, element = layui.element;
element.on('tab(docDemoTabBrief)', function (elem) {
- that.getData(elem.index)
+
+ var val = elem.index;//数据的2和1对调
+ if (elem.index == 1) {
+ val = 2;
+ } else if (elem.index == 2) {
+ val = 1;
+ }
+
+ that.getData(val, that.searchDatas);
});
});
},
@@ -187,12 +196,49 @@
resize: function () {
},
- goOnPosition(arr) {
- // console.log(arr)
+ goOnPosition(arr, i, data) {
+ console.log(data)
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))
});
+ },
+ //定位实体位置
+ shiti: function (data, i) {
+ var imgs = i == 1 ? 'images/addL/全景.png' : i == 2 ? 'images/addL/监控.png' : i == 3 ? 'images/addL/监测.png' : '';
+ this.map.entities.add({
+ id: data.id, // 实体ID
+ name: data.name, // 实体名称
+ position: Cesium.Cartesian3.fromDegrees(Number(data.lon), Number(data.lat)), // x,y 实体经纬度
+ // label: {
+ // show: true,
+ // text: item.siteName, // text 与实体相关的文字
+ // font: "700 14px '黑体'",
+ // fillColor: Cesium.Color.DEEPSKYBLUE,
+ // // backgroundColor: Cesium.Color.DEEPSKYBLUE,
+ // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ // outlineWidth: 2,
+ // outlineColor: Cesium.Color.fromBytes(255, 255, 255), // 文字轮廓的颜色
+ // verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
+ // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
+ // pixelOffset: new Cesium.Cartesian2(10, -10), // 文字位置
+ // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
+ // disableDepthTestDistance: Number.POSITIVE_INFINITY
+ // },
+ billboard: {
+ show: true,
+ // image: 'images/addL/监测.png',
+ image: imgs,
+ // image: entityConfig.img,
+ width: 40,
+ // height: 80,
+ clampToGround: true,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ // rotation: Cesium.Math.toRadians(angle),
+ }
+ })
},
beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
// data.push(...data)
@@ -220,8 +266,8 @@
, 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' }
+ , { field: 'remarks', 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: '#demoTable' }
]],
data: data,
@@ -239,9 +285,9 @@
if (layEvent === 'detail') {
// layer.msg('查看操作');
window.open(obj.data.panAddress);
- console.log(obj.data.panAddress)
+ // console.log(obj.data.panAddress)
} else if (layEvent === 'edit') {
- that.goOnPosition([obj.data.lon, obj.data.lat]);
+ that.goOnPosition([obj.data.lon, obj.data.lat], 1, obj.data);
}
});
}
@@ -291,7 +337,7 @@
$('.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]);
+ that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data);
}
// console.log(obj.data.name)
});
@@ -332,56 +378,19 @@
// 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);
+ // console.log(obj.data.stcd)
+ // console.log(axios)
+ that.setXiangqing(obj);//渲染详情
+ that.getshuiwen(obj.data.stcd)//水文实时渲染
+ that.setbiaoti(obj.data)//表格各分部标题渲染
$('.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)
+ // console.log(obj.data.name)
} else if (layEvent === 'edit') {
- that.goOnPosition([obj.data.lon, obj.data.lat]);
+ that.goOnPosition([obj.data.lon, obj.data.lat], 3, obj.data);
}
});
}
@@ -389,7 +398,107 @@
//…
});
},
+ setXiangqing(obj) {
+ 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">
+ <img src="${obj.data.attList[0].uaOriginPath}" alt="">
+ </td>
+ </tr>`;
+ str += '</table>';
+ XQDom.append(str);
+ },
+ getshuiwen: function (stcd) {
+ var that = this;
+ var url = `http://171.34.76.171:8880/pyh-station/monitorData/queryNewestTimeEleDataByStcd?stcd=${stcd}`,
+ token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyNDQxNDQsImV4cCI6MTYyNTgzNjE0NH0.wjtMw7hv8IYGxFKI9b1vo2ozMXD1pE0-02HinfPl-r8l0TYVg1YvMBxW_VzzFKoY1jeC6XByQQT-aC_mAvBnWA';
+ axios.get(url, {
+ headers: {
+ 'token': token
+ }
+ }).then((res) => {
+ if (res.data.code == 200) {
+ var datashuiziyuan = res.data.data.MONITOR_WATER//水资源数据
+ that.setshishidata(datashuiziyuan, stcd);
+ var datakongqi = res.data.data.MONITOR_AIR//空气源数据
+ that.setshishidata(datakongqi, stcd, '#kongqishishi');
+ var dataqixiang = res.data.data.MONITOR_WEATHER//气象源数据
+ that.setshishidata(dataqixiang, stcd, '#qixiangshishi');
+ }
+ })
+ },
+ setshishidata: function (data, stcd, id = '#shuiwenshishi') {
+ var str = '',
+ shuiwenDom = $('.jimu-widget-searchTabaPopup').find(id)
+ shuiwenDom.empty();
+ str = `<table class="layui-table">
+ <colgroup>
+ <col width="150">
+ <col width="150">
+ <col width="200">
+ <col>
+ </colgroup>
+ <thead>
+ <tr>
+ <th>名称</th>
+ <th>数值</th>
+ <th>单位</th>
+ </tr>
+ </thead>
+ <tbody>`
+ for (var k in data) {
+ str += `<tr><td>${data[k].name}</td><td>${data[k].value}</td><td>${data[k].unit}</td></tr>`
+ }
+ str += `</tbody></table>
+ <input type="test" id="userMyStcd" style="display:none" value="${stcd}"/>`//占位传stcd 给图表历史查询用
+ shuiwenDom.append(str);
+
+ },
+ setbiaoti: function (data) {
+ var title = $('.jimu-widget-searchTabaPopup').find('.myOUrtitle');
+ title.empty();
+ title.append(data.name);
+ var time = $('.jimu-widget-searchTabaPopup').find('.myOUrtime');
+ time.empty();
+ time.append(data.createTime);
+ },
destroy: function () {
//销毁的时候触发
--
Gitblit v1.9.3