Merge branch 'master' of http://192.168.0.105:10010/r/pyhmap

liuyg

2021-07-02 25ce610f6ecca7325e7a743dc032c4a76559c63d

 widgets/searchTabaPopup/Widget.js

@@ -29,10 +29,54 @@
         layers: {},
         startup: function () {
            // 暴露在外的接
            var that = this;
            $('.cloce').click(() => {
               $('.jimu-widget-searchTabaPopup').css({ 'display': 'none' })
               if (window.$myVideoFlvplayer) {
                  var flvPlayer = window.$myVideoFlvplayer;
                  flvPlayer.pause();
                  flvPlayer.unload();
                  flvPlayer.detachMediaElement();
                  flvPlayer.destroy();
                  flvPlayer = null;
                  window.$myVideoFlvplayer = false
               }
               $('.jimu-widget-searchTabaPopup').css({ 'display': 'none' });
               that.myChart.clear();
               that.myChart1.clear();
               that.myChart2.clear();
               $('.myCHosetimeinput').val("");
               that.times = [1];

               var dom = $('#poput-m-t-video');
               dom.empty();
               dom = $('#poput-m-t-quanjing');
               dom.empty();
            })

            $('.jimu-widget-searchTabaPopup').find('#query').click(() => {
               if (that.times[0] != 1 || window.defultEchartsTimes[0] != 1) {
                  that.times = window.defultEchartsTimes;
                  var stcd = $('.jimu-widget-searchTabaPopup').find('#userMyStcd').val();
                  that.getOurData(that.times, stcd);
               } else {
                  layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                     //得到各种内置组件
                     var layer = layui.layer //弹层
                     // layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
                     layer.tips('请先选择时间', '#query', {
                        tips: [1, '#FF5722']
                     });
                  })
               }
            })

            $('.jimu-widget-searchTabaPopup').find('#empty').click(() => {
               $('.myCHosetimeinput').val("");
               that.times = [1];
               window.defultEchartsTimes = [1];
            })

				
         },

         closeToolBox: function (item) {
@@ -42,70 +86,202 @@
         },

         onOpen: function () {
            //面板打开的时候触发 （when open this panel trigger）
            // cc
            var that = this;


            // $('.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>';

         //    XQDom.append(str);


            this.creMyEcharts();
            layui.use('laydate', function () {
               var laydate = layui.laydate;

               laydate.render({
                  elem: '#test6'
                  elem: '#time6'
                  //设置开始日期、日期日期的 input 选择器
                  , type: 'datetime'
                  //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                  , range: ['#test-startDate-1', '#test-endDate-1']
                  , done: function (value, date) {
                     let begintime = value.substring(0, 19),
                        endtime = value.substring(22);
                     that.times = [begintime, endtime];
                  }
               });
               // laydate.render({
               //    elem: '#test6'
               //    ,type: 'datetime'
               //    ,range: true
               //   });
            });
            this.getEchartsData();
         },
         times: [1],
         myChart: '',
         myChart1: '',
         myChart2: '',
         creMyEcharts: function (id) {
            var dom = document.getElementById('popup-threse-shuiwenEcharts');
            this.myChart = echarts.init(dom);
            var dom = document.getElementById('popup-threse-shuiwenEcharts1');
            this.myChart1 = echarts.init(dom);
            var dom = document.getElementById('popup-threse-shuiwenEcharts2');
            this.myChart2 = echarts.init(dom);
         },
         getOurData: function (time, stcd) {
            // console.log(time,stcd,55555555555555)
            var that = this
               , url = `http://171.34.76.171:8880/pyh-station/monitorData/queryStationHistoryMonitorData?stcd=${stcd}&startTime=${time[0]}&endTime=${time[1]}`,
               token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyNDQxNDQsImV4cCI6MTYyNTgzNjE0NH0.wjtMw7hv8IYGxFKI9b1vo2ozMXD1pE0-02HinfPl-r8l0TYVg1YvMBxW_VzzFKoY1jeC6XByQQT-aC_mAvBnWA';
            axios.get(url, {
               headers: {
                  'token': token
               }
            }).then((res) => {
               if (res.data.code == 200) {
                  var shui = res.data.data.MONITOR_WATER//水文
                     , legendData = []
                     , xData = []
                     , seriesData = [];
                  for (var k in shui) {
                     legendData.push(shui[k].name);
                     var once = {
                        name: shui[k].name,
                        type: 'line',
                        stack: '总量',
                        data: [],
                     }
                     var onS = shui[k].valList;
                     for (var o in onS) {
                        once.data.push(onS[o].value);
                     }
                     seriesData.push(once);
                  }
                  try {
                     var ins = shui[1].valList;
                  }
                  catch (err) {
                     //在这里处理错误
                     // console.log(err)
                  }
                  for (var i in ins) {
                     xData.push(ins[i].startTime);
                  }
                  // console.log(seriesData)
                  // console.log(shui[0].valList)
                  that.getEchartsData(legendData, xData, seriesData, 1);//水文

                  var air = res.data.data.MONITOR_AIR//空气
                     , legendDataair = []
                     , xDataair = []
                     , seriesDataair = [];
                  for (var k in air) {
                     legendDataair.push(air[k].name);
                     var once = {
                        name: air[k].name,
                        type: 'line',
                        stack: '总量',
                        data: [],
                     }
                     var onS = air[k].valList;
                     for (var o in onS) {
                        once.data.push(onS[o].value);
                     }
                     seriesDataair.push(once);
                  }
                  try {
                     var ins = air[0].valList;
                  }
                  catch (err) {
                     //在这里处理错误
                     // console.log(err)
                  }
                  for (var i in ins) {
                     xDataair.push(ins[i].startTime);
                  }
                  // 渲染图表
                  that.getEchartsData(legendDataair, xDataair, seriesDataair, 2);//空气

                  var qi = res.data.data.MONITOR_WEATHER//气象
                     , legendDataqi = []
                     , xDataqi = []
                     , seriesDataqi = [];
                  for (var k in qi) {
                     legendDataqi.push(qi[k].name);
                     var once = {
                        name: qi[k].name,
                        type: 'line',
                        stack: '总量',
                        data: [],
                     }
                     var onS = qi[k].valList;
                     for (var o in onS) {
                        once.data.push(onS[o].value);
                     }
                     seriesDataqi.push(once);
                  }
                  try {
                     var ins = qi[0].valList;
                  }
                  catch (err) {
                     //在这里处理错误
                     // console.log(err)
                  }
                  for (var i in ins) {
                     xDataqi.push(ins[i].startTime);
                  }
                  // 渲染图表

                  that.getEchartsData(legendDataqi, xDataqi, seriesDataqi, 3);//气象
               }
            })
         },
         getEchartsData: function (l, x, s, i) {
            var that = this;

            var option;

            option = {
               // title: {
               //    text: '折线图堆叠'
               // },
               animationDuration: 1000,
               color: ['#1AD4AD', '#5AB1EF', '#F96D85', '#FFBD87', '#0067A5', '#CABDE7', '#D87C82', '#A0BEFF', '#D9D0C7', '#8DAD9C'],
               dataZoom: [{
                  type: 'slider'
               }, {
                  type: 'inside'
               }],
               tooltip: {
                  trigger: 'axis'
               },
               legend: {
                  data: l
                  // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
               },
               grid: {
                  left: '1%',
                  right: '3%',
                  bottom: '12%',
                  containLabel: true
               },
               xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: x
               },
               yAxis: {
                  type: 'value'
               },
               series: s,
            };
            if (i == 1) {
               option && that.myChart.setOption(option);
            } else if (i == 2) {
               option && that.myChart1.setOption(option);
            } else if (i == 3) {
               option && that.myChart2.setOption(option);
            }
         },
         onClose: function () {
            //面板关闭的时候触发 （when this panel is closed trigger）
         },