name:' + data.name + '
' + data.dom._value);
domo.show();
}
}
}
},
onClose: function () {
//面板关闭的时候触发 （when this panel is closed trigger）
},
onMinimize: function () {
this.resize();
},
onMaximize: function () {
this.resize();
},
resize: function () {
},
goOnPosition(arr, i, 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) {
// console.log(data)
var imgs = i == 1 ? 'images/addL/全景.png' : i == 2 ? 'images/addL/监控.png' : i == 3 ? 'images/addL/监测.png' : '';
this.addOneEntitys.add({
id: data.id, // 实体ID
name: data.name, // 实体名称
position: Cesium.Cartesian3.fromDegrees(Number(data.lon), Number(data.lat)), // x,y 实体经纬度
label: {
show: true,
text: data.name, // text 与实体相关的文字
font: "700 20px '黑体'",
fillColor: Cesium.Color.fromCssColorString("rgba(57,165,253)"),
// 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.CENTER,//水平位置
pixelOffset: new Cesium.Cartesian2(0, -40), // 文字位置
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: 27,
height: 40,
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
// rotation: Cesium.Math.toRadians(angle),
},
onceData: [i, data]
})
},
beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
// console.log(data,data1,data2)
var that = this;
layui.use(function () {
var element = layui.element
, table = layui.table //表格
, laypage = layui.laypage; //分页
if (data != 1) {
table.render({
elem: '#test'
// , url: './data'全景
, 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: '所属保护区' }
, { field: 'remarks', width: 95, align: 'center', unresize: true, title: '备注' }
, { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' }
]],
data: data,
//,skin: 'line' //表格风格
even: true
// , page: true //是否显示分页
, limits: false
, limit: 10 //每页默认显示的数量
, done: function (res, curr, count) {
that.addTitle();
}
});
table.on('row(test)', function (obj) {
that.goOnPosition([obj.data.lon, obj.data.lat], 1, obj.data);
});
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);
} else if (layEvent === 'edit') {
that.goOnPosition([obj.data.lon, obj.data.lat], 1, obj.data);
}
});
}
if (data1 != 1) {
table.render({
elem: '#test1'
// , url: './data'//监控
, 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: '所属保护区' }
, { field: 'remark', width: 95, align: 'center', unresize: true, title: '备注' }
, { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
]],
data: data1,
//,skin: 'line' //表格风格
even: true
// , page: true //是否显示分页
, limits: false
, limit: 10 //每页默认显示的数量
, done: function (res, curr, count) {
that.addTitle();
}
});
table.on('tool(test1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
var dom = $('.header'),
str = `${obj.data.name}--实时视频`;
dom.empty();
dom.append(str);
if (obj.data.flv) {
var dom = $('#poput-m-t-video'),
str = `
`;
dom.empty();
dom.append(str);
if (flvjs.isSupported()) {
var videoElement = document.getElementById('poput-m-t-video-video');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: obj.data.flv
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
window.$myVideoFlvplayer = flvPlayer;
// var time = setTimeout(() => {
// }, 2000);
} else {
var dom = $('#poput-m-t-video'),
str = `
·暂无视频
`;
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' });
} else if (layEvent === 'edit') {
that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data);
}
});
table.on('row(test1)', function (obj) {
that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data);
});
}
if (data2 != 1) {
table.render({
elem: '#test2'
// , url: './data'//检测
, 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: 'wetlandName_', width: 95, align: 'center', unresize: true, title: '所属保护区' }
, { field: 'remark', width: 95, align: 'center', unresize: true, title: '备注' }
, { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' }
]],
data: data2,
//,skin: 'line' //表格风格
even: true
// , page: true //是否显示分页
, limits: false
, limit: 10 //每页默认显示的数量
, done: function (res, curr, count) {
that.addTitle();
}
});
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('查看操作');
// 监测、测站详情 表格
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' });
} else if (layEvent === 'edit') {
that.goOnPosition([obj.data.lon, obj.data.lat], 3, obj.data);
}
});
table.on('row(test2)', function (obj) {
that.goOnPosition([obj.data.lon, obj.data.lat], 3, obj.data);
});
}
// that.addTitle();
//…
});
},
addTitle: function () {
let tdom = $("[data-field]");
for (var i = 0; i < tdom.length; i++) {
$(tdom[i]).attr("title", $(tdom[i]).text())
}
},
setXiangqing(obj) {
var str = '';
var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
XQDom.empty();
str += '
';
str += `
测站名称：
${obj.data.name}
建设类型：
建设
经度：
${obj.data.lon}
纬度：
${obj.data.lat}
建站时间：
${obj.data.accessTime}
接入时间：
${obj.data.createTime}
所属保护区：
鄱阳湖南矶湿地国家级自然保护区
地址：
暂无
全景地址：
${obj.data.panoramaUrl}/
测站简介：
暂无
图片：
`;
str += '
';
XQDom.append(str);
// 相册层
layui.use(['form', 'layer'], function () {
//----------模块----------
var form = layui.form;
var layer = layui.layer;
layer.photos({
photos: '#popupsimg'
, anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
});
},
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 date = new Date();
var date1 = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
var myDate = date.setDate(date.getDate() - 7);
var date2 = new Date(+new Date(myDate) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
// console.log([date1, date2], 123456789);
//设置value
$('#test-startDate-1').val(date2);
$('#test-endDate-1').val(date1);
window.defultEchartsTimes = [date2, date1];
// var time = setTimeout(() => {
$('.jimu-widget-searchTabaPopup').find('#query').click();
// clearTimeout(time);
// time = null;
// }, 500);
var str = '',
shuiwenDom = $('.jimu-widget-searchTabaPopup').find(id)
shuiwenDom.empty();
str = `
名称
数值
单位
`
for (var k in data) {
str += `${data[k].name} ${data[k].value} ${data[k].unit}
`//占位传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 () {
//销毁的时候触发
//todo
//do something before this func
this.inherited(arguments);
}
});
});