| | |
| | | 'jimu/BaseWidget', |
| | | 'jimu/utils', |
| | | 'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css', |
| | | 'libs/zTree_v3/js/jquery.ztree.all' |
| | | 'libs/zTree_v3/js/jquery.ztree.all', |
| | | './Cesiumadd' |
| | | ], |
| | | function (declare, |
| | | lang, |
| | |
| | | layers: {}, |
| | | states: 'one', |
| | | searchDatas: '', |
| | | addOneEntitys: null, |
| | | startup: function () { |
| | | var that = this; |
| | | |
| | | |
| | | |
| | | //关键词&&坐标 |
| | | $("#i-f-gjz").click(function () { |
| | | that.states = 'one'; |
| | | // console.log("gjz"); |
| | | $("#i-f-zb").css({ 'backgroundColor': '#fff', 'color': '#000' }); |
| | | $("#i-f-zb").css({ 'backgroundColor': '#fff', 'color': '#969696' }); |
| | | $("#i-f-gjz").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' }); |
| | | // $("#inputTwo").css({ 'display': 'none' }); |
| | | // $("#local_data").css({ 'display': 'inline-block' }); |
| | |
| | | }) |
| | | $("#i-f-zb").click(function () { |
| | | that.states = 'two'; |
| | | // console.log("zb"); |
| | | $("#i-f-gjz").css({ 'backgroundColor': '#fff', 'color': '#000' }); |
| | | $("#i-f-gjz").css({ 'backgroundColor': '#fff', 'color': '#969696' }); |
| | | $("#i-f-zb").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' }); |
| | | // $("#local_data").css({ 'display': 'none' }); |
| | | // $("#inputTwo").css({ 'display': 'inline-block' }); |
| | |
| | | }) |
| | | |
| | | $(".searchImg").click(function () { |
| | | // that.getInputData(); |
| | | // that.setVal(that.searchDatas); |
| | | $('.searchLMain').show(); |
| | | that.getInputData(); |
| | | |
| | | that.addOneEntitys.removeAll(); |
| | | if (typeof that.searchDatas == 'string') { |
| | | var han = /^[\u4e00-\u9fa5]+$/; |
| | | if (han.test(that.searchDatas) || that.searchDatas == ' ') { |
| | | that.getData(0, that.searchDatas); |
| | | $('.searchLMain').show(); |
| | | $('.searchLMain').find('ul.layui-tab-title li:eq(0)').addClass('layui-this').siblings().removeClass('layui-this'); |
| | | $('.searchLMain').find('div.layui-tab-content > div.layui-tab-item:eq(0)').addClass('layui-show').siblings().removeClass('layui-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]) { |
| | | that.map.camera.flyTo({ |
| | | // destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(gaodu)) |
| | | destination: Cesium.Cartesian3.fromDegrees(Number(that.searchDatas[0]), Number(that.searchDatas[1]), Number(8000)) |
| | | |
| | | }); |
| | | } 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.addOneEntitys.removeAll(); |
| | | topic.publish('getLegendsData', "legends", ''); |
| | | }) |
| | | // that.getInputData(); |
| | | // that.setVal(that.searchDatas); |
| | | |
| | | $("#local_data").keyup(function (e) { |
| | | // console.log(e); |
| | | that.getInputData(); |
| | | if (e.keyCode == 13 && typeof that.searchDatas == 'string') { |
| | | that.addOneEntitys.removeAll(); |
| | | var han = /^[\u4e00-\u9fa5]+$/; |
| | | if (han.test(that.searchDatas) || that.searchDatas == ' ') { |
| | | that.getData(0, that.searchDatas); |
| | | $('.searchLMain').show(); |
| | | $('.searchLMain').find('ul.layui-tab-title li:eq(0)').addClass('layui-this').siblings().removeClass('layui-this'); |
| | | $('.searchLMain').find('div.layui-tab-content > div.layui-tab-item:eq(0)').addClass('layui-show').siblings().removeClass('layui-show'); |
| | | |
| | | |
| | | // 自动展开面板 面板和搜索无关! |
| | | $('.searchLMain').show(); |
| | | |
| | | |
| | | |
| | | }, |
| | | |
| | | closeToolBox: function (item) { |
| | | // if (item != this.name) { |
| | | // $('.tool-y-box').hide(); |
| | | // } |
| | | } 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(); |
| | | } |
| | | } |
| | | }) |
| | | |
| | | }, |
| | | getInputData: function () { |
| | |
| | | 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'; |
| | | getData: function (index, val) { |
| | | val = val == ' ' ? '' : val; |
| | | |
| | | 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) { |
| | | 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 || []; |
| | | |
| | | 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.addOneEntitys.removeAll();//清除图标点 |
| | | if (d == []) { |
| | | if (n == 0) { |
| | | this.beginLayUi(d); |
| | | topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "全景站点"); |
| | | } else if (n == 1) { |
| | | this.beginLayUi(1, d); |
| | | topic.publish('getLegendsData', "legends", d, "./images/addL/监控.png", "监控站点"); |
| | | } else if (n == 2) { |
| | | this.beginLayUi(1, 1, d); |
| | | topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "监测站点"); |
| | | } |
| | | } else { |
| | | var i = 1; |
| | | for (var k in d) { |
| | | d[k].tableId = i++; |
| | | //赋图标点 |
| | | this.shiti(d[k], +n + 1); |
| | | } |
| | | var data = d; |
| | | if (n == 0) { |
| | | this.beginLayUi(data); |
| | | topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "全景站点"); |
| | | } else if (n == 1) { |
| | | this.beginLayUi(1, data); |
| | | topic.publish('getLegendsData', "legends", d, "./images/addL/监控.png", "监控站点"); |
| | | } else if (n == 2) { |
| | | this.beginLayUi(1, 1, data); |
| | | topic.publish('getLegendsData', "legends", d, "./images/addL/监测.png", "监测站点"); |
| | | } |
| | | } |
| | | }, |
| | | onOpen: function () { |
| | | var dataSourceOne = new Cesium.CustomDataSource(); |
| | | this.addOneEntitys = dataSourceOne.entities; |
| | | this.map.dataSources.add(dataSourceOne); |
| | | //面板打开的时候触发 |
| | | 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) |
| | | |
| | | var val = elem.index;//数据的2和1对调 |
| | | if (elem.index == 1) { |
| | | val = 2; |
| | | } else if (elem.index == 2) { |
| | | val = 1; |
| | | } |
| | | |
| | | that.getData(val, that.searchDatas); |
| | | }); |
| | | }); |
| | | |
| | | // 地图图标点击事件 |
| | | this.movehandLer(); |
| | | }, |
| | | // 获取鼠标事件 |
| | | movehandLer: function movehandLer() { |
| | | // 取消默认双击事件 |
| | | this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); |
| | | // 获取鼠标事件 |
| | | this.mountainHandler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas); |
| | | // 给鼠标左键添加事件函数 |
| | | // this.mountainHandler.setInputAction(lang.hitch(this, this.mouseMove), Cesium.ScreenSpaceEventType.MOUSE_MOVE); |
| | | this.mountainHandler.setInputAction(lang.hitch(this, this.clickHand), Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | }, |
| | | // 注册鼠标左键单击事件 |
| | | clickHand: function clickHand(data) {// 全局鼠标点击图标事件 渲染地图图标时 添加个相对应的数组储存该对象数据 通过数组是否存在判断点击的项目 |
| | | var pickedObjects = this.map.scene.drillPick(data.position) || 0; |
| | | // console.log(pickedObjects); |
| | | if (pickedObjects.length != 0) { |
| | | if (pickedObjects[0].primitive.id != undefined) { |
| | | if (pickedObjects[0].primitive.id.onceData != undefined) {//搜索图标点击事件 |
| | | // console.log('onceData') |
| | | var data = pickedObjects[0].primitive.id.onceData[1]; |
| | | |
| | | if (pickedObjects[0].primitive.id.onceData[0] == 1) {//全景 |
| | | var address = data.panAddress; |
| | | var dom = $('.jimu-widget-searchTabaPopup').find('.header'), |
| | | str = `${data.name}--全景`; |
| | | dom.empty(); |
| | | dom.append(str); |
| | | // console.log(data) |
| | | |
| | | dom = $('#poput-m-t-quanjing'); |
| | | str = `<iframe id="poput-m-t-quanjing-iframe" src="${address}" frameborder="0"></iframe>`; |
| | | 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' }); |
| | | } |
| | | if (pickedObjects[0].primitive.id.onceData[0] == 2) {//监控 |
| | | var dom = $('.jimu-widget-searchTabaPopup').find('.header'), |
| | | str = `${data.name}--实时视频`; |
| | | dom.empty(); |
| | | dom.append(str); |
| | | // console.log(data) |
| | | if (data.flv) { |
| | | dom = $('#poput-m-t-video'); |
| | | str = ` |
| | | <video id="poput-m-t-video-video" ></video> |
| | | `; |
| | | dom.empty(); |
| | | dom.append(str); |
| | | if (flvjs.isSupported()) { |
| | | var videoElement = document.getElementById('poput-m-t-video-video'); |
| | | var flvPlayer = flvjs.createPlayer({ |
| | | type: 'flv', |
| | | url: data.flv |
| | | }); |
| | | flvPlayer.attachMediaElement(videoElement); |
| | | flvPlayer.load(); |
| | | flvPlayer.play(); |
| | | } |
| | | window.$myVideoFlvplayer = flvPlayer; |
| | | // var time = setTimeout(() => { |
| | | |
| | | // }, 2000); |
| | | } else { |
| | | var dom = $('#poput-m-t-video'), |
| | | str = ` |
| | | <div id="poput-m-t-video-none" >·暂无视频</div> |
| | | `; |
| | | 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' }); |
| | | } |
| | | if (pickedObjects[0].primitive.id.onceData[0] == 3) {//监测 |
| | | console.log('监测', data) |
| | | } |
| | | |
| | | |
| | | } else if (pickedObjects[0].primitive.id.SQLData != undefined) {//SQL查询图标点击事件 |
| | | // console.log('SQLData') |
| | | } else if (pickedObjects[0].primitive.id.spatialQueryData != undefined) {//SQL查询图标点击事件 |
| | | var data = pickedObjects[0].primitive.id.spatialQueryData; |
| | | data.name = pickedObjects[0].primitive.id.name; |
| | | data.dom = pickedObjects[0].primitive.id.description; |
| | | // console.log(data); |
| | | var doms = $('#spatialQueryValuemain'); |
| | | var domo = $('#spatialQueryValue'); |
| | | doms.empty(); |
| | | doms.append('<div>name:' + data.name + '<div/>' + data.dom._value); |
| | | domo.show(); |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | |
| | | onClose: function () { |
| | |
| | | resize: function () { |
| | | |
| | | }, |
| | | goOnPosition(arr) { |
| | | // console.log(arr) |
| | | 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)) |
| | | }); |
| | | }, |
| | | beginLayUi: function (data = 1, data1 = 1, data2 = 1) { |
| | | // data.push(...data) |
| | | //定位实体位置 |
| | | 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.render({ |
| | | elem: '#test' |
| | | // , url: './data' |
| | | , height: 475 |
| | | // , url: './data'全景 |
| | | , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 |
| | | // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | | layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | |
| | | } |
| | | , 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: '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, |
| | |
| | | // , 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="对应的值" |
| | |
| | | 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]); |
| | | that.goOnPosition([obj.data.lon, obj.data.lat], 1, obj.data); |
| | | } |
| | | }); |
| | | } |
| | | if (data1 != 1) { |
| | | |
| | | table.render({ |
| | | elem: '#test1' |
| | | // , url: './data' |
| | | , height: 475 |
| | | // , url: './data'//监控 |
| | | , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 |
| | | // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | | layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | |
| | | } |
| | | , 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' } |
| | | , { 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, |
| | |
| | | // , 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') { |
| | | // layer.msg('查看操作'); |
| | | 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>`; |
| | | var dom = $('.header'), |
| | | str = `${obj.data.name}--实时视频`; |
| | | dom.empty(); |
| | | dom.append(str); |
| | | if (obj.data.flv) { |
| | | var dom = $('#poput-m-t-video'), |
| | | str = ` |
| | | <video id="poput-m-t-video-video" ></video> |
| | | `; |
| | | 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 = ` |
| | | <div id="poput-m-t-video-none" >·暂无视频</div> |
| | | `; |
| | | 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]); |
| | | that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data); |
| | | } |
| | | // console.log(obj.data.name) |
| | | }); |
| | | |
| | | 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' |
| | | , height: 475 |
| | | // , url: './data'//检测 |
| | | , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 |
| | | // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | | layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | |
| | | } |
| | | , 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' } |
| | | , { 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, |
| | |
| | | // , 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 对应的值 |
| | |
| | | // 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); |
| | | |
| | | 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) |
| | | } else if (layEvent === 'edit') { |
| | | that.goOnPosition([obj.data.lon, obj.data.lat]); |
| | | 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 += '<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" id="popupsimg"> |
| | | <img layer-src="${obj.data.attList[0].uaOriginPath}" src="${obj.data.attList[0].uaOriginPath}" alt=""> |
| | | </td> |
| | | </tr>`; |
| | | str += '</table>'; |
| | | 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 = `<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 () { |
| | | //销毁的时候触发 |