数据图表的查询渲染

liuyg

2021-06-10 df1c052d1f0d368cb78ebb1831980745bca11edc

数据图表的查询渲染

 images/addL/全景.png

 images/addL/监控.png

 images/addL/监测.png

 widgets/searchL/Widget.js

@@ -133,6 +133,7 @@
                })
            },
            createDatas: function (d, n) {
                this.map.entities.removeAll();//清除图标点
                if (d == []) {
                    if (n == 0) {
                        this.beginLayUi(d);
@@ -145,8 +146,11 @@
                    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) {
@@ -192,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)
@@ -246,7 +287,7 @@
                                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);
                            }
                        });
                    }
@@ -296,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)
                        });
@@ -337,6 +378,27 @@
                                //   layer.msg('查看操作');

                                // 监测、测站详情 表格


                                // 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)
                            } else if (layEvent === 'edit') {
                                that.goOnPosition([obj.data.lon, obj.data.lat], 3, obj.data);
                            }
                        });
                    }

                    //…
                });
            },
            setXiangqing(obj) {
                                var str = '';
                                var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
                                XQDom.empty();
@@ -382,21 +444,61 @@
                                        </tr>`;
                                str += '</table>';
                                XQDom.append(str);


                                $('.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]);
                            }
                        });
                    }

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

 widgets/searchTabaPopup/Widget.html

@@ -26,8 +26,8 @@
                    <div class="layui-tab-item ">
                        <div class="shishishuju">
                            <div class="heard">
                                <div>当前站点：<span>南矶山备战湖</span> </div>
                                <div>监测时间：<span>2021-05-06 10：07:00</span> </div>
                                <div>当前站点：<span  class="myOUrtitle">南矶山备战湖</span> </div>
                                <div>监测时间：<span  class="myOUrtime">2021-05-06 10：07:00</span> </div>
                            </div>
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
@@ -36,68 +36,11 @@
                                    <li>气象数据</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <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>
                                                <tr>
                                                    <td>水温</td>
                                                    <td>0</td>
                                                    <td>℃</td>
                                                </tr>
                                                <tr>
                                                    <td>PH值</td>
                                                    <td>0</td>
                                                    <td>无量纲</td>
                                                </tr>
                                                <tr>
                                                    <td>溶解氧</td>
                                                    <td>0</td>
                                                    <td>ppm</td>
                                                </tr>
                                                <tr>
                                                    <td>电导率</td>
                                                    <td>0</td>
                                                    <td>S/m</td>
                                                </tr>
                                                <tr>
                                                    <td>叶绿素a</td>
                                                    <td>0</td>
                                                    <td>ug/L</td>
                                                </tr>
                                                <tr>
                                                    <td>浑浊度</td>
                                                    <td>0</td>
                                                    <td>NTU</td>
                                                </tr>
                                                <tr>
                                                    <td>化学需氧量</td>
                                                    <td>0</td>
                                                    <td>无量纲</td>
                                                </tr>
                                                <tr>
                                                    <td>总磷</td>
                                                    <td>0</td>
                                                    <td>mg/L</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    <div class="layui-tab-item layui-show" id="shuiwenshishi">
                                        <!-- js数据 -->
                                    </div>
                                    <div class="layui-tab-item">空气质量数据</div>
                                    <div class="layui-tab-item">气象数据</div>
                                    <div class="layui-tab-item" id="kongqishishi">空气质量数据</div>
                                    <div class="layui-tab-item" id="qixiangshishi">气象数据</div>
                                </div>
                            </div>
                        </div>
@@ -105,29 +48,28 @@
                    <div class="layui-tab-item">
                        <div class="lishijilv">
                            <div class="heard">
                                <div class="left">
                                <div class="left" id="leftTimesdom">
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <!-- <label class="layui-form-label">日期范围</label> -->
                                                <div class="layui-inline" id="test6">
                                                <div class="layui-inline" id="time6">
                                                    <div class="layui-input-inline">
                                                        <input type="text" autocomplete="off" id="test-startDate-1"
                                                            class="layui-input" placeholder="开始日期">
                                                            class="layui-input myCHosetimeinput" placeholder="开始日期">
                                                    </div>
                                                    <div class="layui-form-mid">-</div>
                                                    <div class="layui-input-inline">
                                                        <input type="text" autocomplete="off" id="test-endDate-1"
                                                            class="layui-input" placeholder="结束日期">
                                                            class="layui-input myCHosetimeinput" placeholder="结束日期">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal">查询</button>
                                    <button type="button" class="layui-btn layui-btn-danger">清空</button>
                                    <button type="button" id="query" class="layui-btn layui-btn-normal">查询</button>
                                    <button type="button" id="empty" class="layui-btn layui-btn-danger">清空</button>
                                </div>
                                <div class="rights">当前站点：<span>南矶山备战湖</span> </div>
                                <div class="rights">当前站点：<span class="myOUrtitle">南矶山备战湖</span> </div>
                            </div>
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
@@ -137,12 +79,20 @@
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div style="width: 1100px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts">
                                        <div style="width: 1080px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts">
                                            
                                        </div>
                                    </div>
                                    <div class="layui-tab-item">空气质量数据</div>
                                    <div class="layui-tab-item">气象数据</div>
                                    <div class="layui-tab-item">
                                        <div style="width: 1080px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts1">
											
                                        </div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div style="width: 1080px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts2">
											
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

 widgets/searchTabaPopup/Widget.js

@@ -29,8 +29,32 @@
            layers: {},
            startup: function () {
                // 暴露在外的接
                var that = this;
                $('.cloce').click(() => {
                    $('.jimu-widget-searchTabaPopup').css({ 'display': 'none' })
                })

                $('.jimu-widget-searchTabaPopup').find('#query').click(() => {
                    if (that.times[0] != 1) {
                        // console.log(that.times);
                        var stcd = $('.jimu-widget-searchTabaPopup').find('#userMyStcd').val()
                        console.log(stcd);
                        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];
                })

            },
@@ -42,6 +66,7 @@
            },

            onOpen: function () {
                var that = this;
                // $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                // $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                this.creMyEcharts();
@@ -49,20 +74,130 @@
                    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];
                            // console.log(that.times)
                        }
                    });
                    // 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);
            },
            getEchartsData: function () {
            getOurData: function (time, stcd) {
                console.log(time)
                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);
                        }
                        var ins = shui[0].valList;
                        for (var i in ins) {
                            xData.push(ins[i].startTime);
                        }
                        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);
                        }
                        var ins = air[0].valList;
                        for (var i in ins) {
                            xDataair.push(ins[i].startTime);
                        }
                        // console.log(shui);
                        // console.log(seriesData);
                        // 渲染图表
                        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);
                        }
                        var ins = qi[0].valList;
                        for (var i in ins) {
                            xDataqi.push(ins[i].startTime);
                        }
                        // console.log(shui);
                        // console.log(seriesData);
                        // 渲染图表
                        that.getEchartsData(legendDataqi, xDataqi, seriesDataqi, 3);//气象
                    }
                })
            },
            getEchartsData: function (l, x, s, i) {
                var that = this;

                var option;
@@ -82,62 +217,32 @@
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                        data: l
                        // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        left: '1%',
                        right: '3%',
                        bottom: '12%',
                        containLabel: true
                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        data: x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                    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）

 widgets/searchTabaPopup/css/style.css

@@ -18,11 +18,13 @@
.jimu-widget-searchTabaPopup .popup {
  /* display: none; */
  width: 1100px;
  height: 600px;
  min-height: 600px;
  max-height: 750px;
  overflow: auto;
  /* border: 1px solid salmon; */
  position: relative;
  border-radius: 5px;
  top: calc(50% - 300px);
  top: calc(50% - 380px);
  left: calc(50% - 549px);
  background-color: rgba(255, 255, 255, 1);
}