popup弹窗加echarts

liuyg

2021-06-09 8f048024b02f0af68b43209b9ba0e66069729bc5

popup弹窗加echarts

 index.html

@@ -23,6 +23,8 @@
    <!-- video flv播放 -->
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
    <!-- echarts -->
    <script src="libs/echarts/v4/echarts.min.js"></script>
    <!-- 动态标绘 -->
    <!-- <script src='libs/Cesium/ThirdParty/Workers/PlotAlgo/PlotAlgoInclude.js'></script> -->


 widgets/LeftNavigationBar/Widget.js

@@ -134,7 +134,7 @@
                    }
                }).then((res) => {
                    if (res.data.code == '200') {
                        console.log(res, 'open', 898998)
                        // console.log(res, 'open', 898998)
                        that.changeData(res.data.data); //重写数据
                    }
                })

 widgets/SceneMode/Widget.js

@@ -29,7 +29,7 @@
            layers: {},
            startup: function () {
                var that = this;
                console.log(that.map, 213)
                // console.log(that.map, 213)
                $(".jimu-widget-SceneMode button").html("<img src='../../../images/2D.png' alt='' title='2D'>");

                $(".jimu-widget-SceneMode button").click(function () {

 widgets/searchL/Widget.html

@@ -13,7 +13,7 @@
    </div>
    <img class="input_img searchImg" src="images/addL/sous.png">
    <div class="searchLMain">
        <!-- <div class="searchColce">X</div> -->
        <div class="searchColce">X</div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">全景</li>
@@ -24,23 +24,22 @@
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                    <div id="demoTable" style="display: none;">
                        <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看全景</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">全景</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-hide" id="test1" lay-filter="test1"></table>
                    <div id="demoTable1" style="display: none;">
                        <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
                        <a class="layui-btn layui-btn-xs" lay-event="edit">实时视频</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">视频</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-hide" id="test2" lay-filter="test2"></table>
                    <div id="demoTable2" style="display: none;">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情信息</a>
                        <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a>
                    </div>
                </div>
            </div>

 widgets/searchL/Widget.js

@@ -54,11 +54,11 @@
                    $("#local_data").hide();
                })

                // $(".searchImg").click(function () {
                //     that.getInputData();
                //     that.setVal(that.searchDatas);
                //     $('.searchLMain').show();
                // })
                $(".searchImg").click(function () {
                    // that.getInputData();
                    // that.setVal(that.searchDatas);
                    $('.searchLMain').show();
                })
                $(".searchColce").click(function () {
                    $('.searchLMain').hide();
                })
@@ -119,7 +119,7 @@
            },
            getData: function (index) {
                var d = $('.searchLMain').find('.layui-tab-item').hide;
                console.log(d)
                // 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'
@@ -187,9 +187,17 @@
            resize: function () {

            },
            goOnPosition(arr) {
                // console.log(arr)
                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)
                // console.log(data)
                var that = this;
                layui.use(function () {
                    var element = layui.element
                        , table = layui.table //表格
@@ -230,9 +238,11 @@
                                , layEvent = obj.event; //获得 lay-event 对应的值
                            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]);
                            }
                            window.open(obj.data.panAddress);
                            console.log(obj.data.panAddress)
                        });
                    }
                    if (data1 != 1) {
@@ -268,18 +278,21 @@
                                , layEvent = obj.event; //获得 lay-event 对应的值
                            if (layEvent === 'detail') {
                                //   layer.msg('查看操作');
                            }
                            var dom = $('#poput-m-t-video'),
                                str = `<div class="title">名称：${obj.data.name}</div>
                                <video id="video1" class="video-js vjs-default-skin" width="840" height="480"
                                    data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
                                    <source src="${obj.data.flv}" type="video/x-flv">
                                </video>`;
                            dom.empty();
                            dom.append(str);
                                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>`;
                                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' });
                                $('.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]);
                            }
                            // console.log(obj.data.name)
                        });
                    }
@@ -317,60 +330,59 @@
                                , layEvent = obj.event; //获得 lay-event 对应的值
                            if (layEvent === 'detail') {
                                //   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);


                                $('.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]);
                            }
                            // 监测、测站详情 表格
                            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);





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

                        });
                    }


 widgets/searchTabaPopup/Widget.html

@@ -12,7 +12,7 @@
        </div>
        <div class="p-main three">
            <div class="cloce"></div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab layui-tab-brief" lay-filter="popup-main">
                <ul class="layui-tab-title">
                    <li class="layui-this">测站详情</li>
                    <li>实时数据</li>
@@ -137,7 +137,9 @@
                                </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>
                                    </div>
                                    <div class="layui-tab-item">空气质量数据</div>
                                    <div class="layui-tab-item">气象数据</div>

 widgets/searchTabaPopup/Widget.js

@@ -42,58 +42,9 @@
            },

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

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

@@ -104,8 +55,89 @@
                        , range: ['#test-startDate-1', '#test-endDate-1']
                    });
                });
                this.getEchartsData();
            },
            myChart: '',
            creMyEcharts: function (id) {
                var dom = document.getElementById('popup-threse-shuiwenEcharts');
                this.myChart = echarts.init(dom);
            },
            getEchartsData: function () {
                var that = this;

                var option;
                console.log(this.myChart);

                option = {
                    // title: {
                    //     text: '折线图堆叠'
                    // },
                    dataZoom: [{
                        type: 'slider'
                    }, {
                        type: 'inside'
                    }],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '12%',
                        containLabel: true
                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    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]
                        }
                    ]
                };

                option && that.myChart.setOption(option);
            },
            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

 widgets/searchTabaPopup/css/style.css

@@ -21,9 +21,9 @@
  height: 600px;
  /* border: 1px solid salmon; */
  position: relative;
  /* border-radius: 5px; */
  border-radius: 5px;
  top: calc(50% - 300px);
  left: calc(50% - 550px);
  left: calc(50% - 549px);
  background-color: rgba(255, 255, 255, 1);
}

@@ -31,8 +31,9 @@
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
  /* border: 1px salmon solid; */
  border-radius: 5px;
  /* border-radius: 50px !important; */
}

.jimu-widget-searchTabaPopup .p-main .cloce {
@@ -61,16 +62,35 @@

.jimu-widget-searchTabaPopup .two #poput-m-t-video{
  width: 100%;
  height: 100%;
  height: calc(100% - 40px);
  /* border: 1px springgreen solid; */
  display: flex;
  background-color: transparent;
  /* display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-direction: column; */
  position: absolute;
  top: 40px;
}
.jimu-widget-searchTabaPopup .two #poput-m-t-video .title{
/* .jimu-widget-searchTabaPopup .two #poput-m-t-video .title{
  color: #409EFF;
  width: 92%;
  font-size: 25px;
  padding-bottom: 20px;
  padding: 20px 0 8px 0;
} */
.jimu-widget-searchTabaPopup .two #poput-m-t-video .header{
  background-color: #409EFF;
  width: 100%;
  height: 40px;
  position: absolute;
  font-size: 20px;
  top: -40px;
  left: 0;
  color: #fff;
  line-height: 40px;
  border-radius: 5px 5px 0 0;
  text-indent: 2em;
  z-index: 14;
}