数据图表的查询渲染

liuyg

2021-06-10 df1c052d1f0d368cb78ebb1831980745bca11edc

 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 () {
            //销毁的时候触发