add echart table

wangzhibo

2021-11-02 40bdf8428336e29a77507cc8698f13a0b750a3b5

add echart table

 js/function.js

@@ -177,11 +177,10 @@
  }
}


function changeNullAndundefinedToEmpty(json_in) {
  for (var key in json_in) {
    if (json_in[key] == null || json_in[key] == 'null' || json_in[key] == undefined || json_in[key] == 'undefined') {
      json_in[key] = "";
      json_in[key] = "/";
    }
  }
  return json_in;

 widgetsTS/dataTime/widget.js

@@ -107,7 +107,7 @@

        mars3d.global_variables.queryDataTStart =  $('#appDate').val() + " 00:00:00";
        mars3d.global_variables.queryDataTEnd = $('#appDate').val()+ " 00:15:00";
        mars3d.global_variables.DefaultDateTimeStart = $('#appDate').val().substring(0,9)+"01 00:00:00";
        mars3d.global_variables.DefaultDateTimeStart = $('#appDate').val().substring(0,8)+"01 00:00:00";
        mars3d.global_variables.queryDataTStartGeo = tmpDatetime;

        reLoadLayers();

 widgetsTS/widget_detail/view.js

@@ -1,27 +1,33 @@
var myCharts;
//对应widget.js中MyWidget实例化后的对象
var thisWidget
var thisWidget;

var tmpQueryParams;

//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget;
  DatePicker("#appDateHourStart", '#appDateHourEnd');
  $("#appDateHourStart").datetimepicker("setDate", new Date(thisWidget.appDateHourStart));
  $('#appDateHourEnd').datetimepicker('setDate', new Date(thisWidget.appDateHourEnd));

  //开始查询历史数据
  $("#startQueryHistory").click(function () {
    if (myCharts) {
        $('#echart').removeAttr('_echarts_instance_');
    }
    var backend_url = thisWidget.config.params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + thisWidget.config.params.layerid + "_single_path&datatype=" + thisWidget.config.params.datatype + "&siteid=" + thisWidget.config.params.siteid + "&datatime1=" + thisWidget.appDateHourStart + "&datatime2=" + thisWidget.appDateHourEnd+ "&count=10";
    queryEchartDataByTimePeriod();
    
});

}
function queryEchartDataByTimePeriod(){
    
    var backend_url = tmpQueryParams.nodejs_url_predix + "dataapi/Bdata?bid=get_" + tmpQueryParams.layerid + "_single_path&datatype=" + tmpQueryParams.datatype + "&siteid=" + tmpQueryParams.siteid + "&datatime1=" + tmpQueryParams.appDateHourStart + "&datatime2=" + tmpQueryParams.appDateHourEnd+ "&count=10";
    // all 1006xx layer has the same legend ！！
    var layerid = thisWidget.config.params.layerid+"";
    var layerid = tmpQueryParams.layerid+"";

    var legendData = all_layer_legends[layerid.substring(0,4)];
    var legendData_selected = {};
    legendData.forEach(element => {
        if (element==thisWidget.config.params.selected_qindex.toLowerCase()){
        if (element==tmpQueryParams.selected_qindex.toLowerCase()){
            legendData_selected[element] =true;
        }else{
            legendData_selected[element] =false;
@@ -31,7 +37,7 @@
    if (legendData == null || legendData.length < 1) {
        return;
    }
    var colorData = echart_lines_color_list[thisWidget.config.params.layerid];
    var colorData = echart_lines_color_list[tmpQueryParams.layerid];
    var myItemStyle = {
        normal: {
            // 拐点上显示数值
@@ -73,7 +79,7 @@
                }
                for (var i = 0; i < tableData.length; i++) {
                    var indexObj = tableData[i];
                    timeLineData.push(shortenLegendTimeString(thisWidget.config.params.datatype, indexObj.datatime));
                    timeLineData.push(shortenLegendTimeString(tmpQueryParams.queryDataType, indexObj.datatime));
                    for (var j = 0; j < legendData.length; j++) {
                        var singleLegend = legendData[j];
                        var sdata = seriesObj[singleLegend];
@@ -95,14 +101,16 @@
                        top: '20px',
                        x: 'center'
                    },
                    
                    dataZoom: [
                        {
                            type: 'inside',
                            xAxisIndex: [0],
                            start: 30,
                            end: 50
                            start: 0,
                            end: 100
                        }
                    ],
                    
                    legend: {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'horizontal',
@@ -152,10 +160,7 @@
                        // 设置X轴数据旋转倾斜
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
                            formatter:  (value)=> {
                                return value.substring(0,2)+'日'+"\n"+value.substring(3,5)+'时';
                            }
                            interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
                           
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
@@ -212,6 +217,9 @@
                    series: seriesData,
                    color: colorData
                };
                console.log(timeLineData);
                console.log(seriesData);
                
                myCharts = echarts.init(document.getElementById('echart'));
                myCharts.setOption(options, true);
                window.onresize = function(){
@@ -225,21 +233,18 @@
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });

  });

}

function resetStartQueryHistoryText() {
    $("#startQueryHistoryText").text("查询");
  }

function DatePicker(beginSelector, endSelector) {

    var dateFormat = tmpQueryParams.queryDataType=='day'?'yyyy-mm-dd':'yyyy-mm-dd hh:00:00';

    var miniView = tmpQueryParams.queryDataType=='day'?'month':'day';
    $(beginSelector).datetimepicker(
      {
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: 'yyyy-mm-dd hh:ii:00',
        minView: 'day',//设置时间选择为年月日 去掉时分秒选择
        format: dateFormat,
        minView: miniView,
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
@@ -255,12 +260,14 @@
        } else {
          $(endSelector).datetimepicker('setStartDate', null);
        }
        thisWidget.appDateHourStart = $(beginSelector).val();
        console.log($(beginSelector).val())
        tmpQueryParams.appDateHourStart = $(beginSelector).val();
      })
    $(endSelector).datetimepicker(
      {
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: 'yyyy-mm-dd hh:ii:00',
        format: dateFormat,
        minView: miniView,
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
@@ -271,7 +278,8 @@
        todayHighlight: 1,  //如果为true, 高亮当前日期
        endDate: new Date()
      }).on('changeDate', function (ev) {
        thisWidget.appDateHourEnd = $(endSelector).val();
        console.log($(endSelector).val())
        tmpQueryParams.appDateHourEnd = $(endSelector).val();
      })
  }

@@ -280,7 +288,14 @@
  /////
function reloadData(params) {

    loadLineChartbySiteid(params);
    tmpQueryParams = params;

    DatePicker("#appDateHourStart", '#appDateHourEnd');
    $("#appDateHourStart").datetimepicker("setDate", new Date(params.appDateHourStart));
    $('#appDateHourEnd').datetimepicker('setDate', new Date(params.appDateHourEnd));
    //loadLineChartbySiteid(params);
    queryEchartDataByTimePeriod();

    loadDetailedInfobySiteid(params);

}
@@ -575,10 +590,11 @@
function shortenLegendTimeString(datatype,full_time_str) {

    if (datatype == 'hour') {
        return full_time_str.substring(8, 13);
        
        return full_time_str.substring(8, 10)+'日'+"\n"+full_time_str.substring(11,13)+'时';

    } else if (datatype == 'day') {
        return full_time_str.substring(8, 10) ;
        return full_time_str.substring(8, 10) +'日';

    } else {
        return full_time_str;

 widgetsTS/widget_detail/widget.js

@@ -23,34 +23,23 @@
            
         }
        reloadData(params) {
            params.queryDataType =  mars3d.global_variables.queryDataType;
            params.appDateHourStart = mars3d.global_variables.DefaultDateTimeStart;
            params.appDateHourEnd = mars3d.global_variables.queryDataTStart;
            this.winPage.reloadData(params);

            this.viewWindow.resetStartQueryHistoryText(params.siteid);
            this.config.params.siteid = params.siteid;

            this.viewWindow.resetStartQueryHistoryText(params.layerid);
            this.config.params.layerid = params.layerid;


            this.appDateHourStart = mars3d.global_variables.DefaultDateTimeStart;
            this.appDateHourEnd = mars3d.global_variables.queryDataTStart;

        }

        //每个窗口创建完成后调用
        winCreateOK(opt, result) {
            this.winPage = result;          
            this.nodejs_url_predix = mars3d.global_variables.nodejs_url_predix;
            this.config.params.nodejs_url_predix = mars3d.global_variables.nodejs_url_predix;
            this.config.params.queryDataType =  mars3d.global_variables.queryDataType;
            this.config.params.appDateHourStart = mars3d.global_variables.DefaultDateTimeStart;
            this.config.params.appDateHourEnd = mars3d.global_variables.queryDataTStart;
            this.winPage.reloadData(this.config.params);

            this.viewWindow = result;
            this.config.params.siteid = this.config.params.siteid;
            this.viewWindow.resetStartQueryHistoryText(this.config.params.siteid);
            this.config.params.layerid = this.config.params.layerid;
            this.viewWindow.resetStartQueryHistoryText(this.config.params.layerid);

            this.appDateHourStart = mars3d.global_variables.DefaultDateTimeStart;
            this.appDateHourEnd = mars3d.global_variables.queryDataTStart;
        }
        //打开激活
        activate() {

 widgetsTS/widget_summary/view.html

@@ -74,7 +74,7 @@
    <div class="layui-row">
        <span class="layui-breadcrumb" lay-separator="|">
            <a href="#"></a>
            <a href="#" style="color: white!important;">监测Top20</a>
            <a href="#" style="color: white!important;">监测Top30</a>
            <a href="#"></a>
        </span>
    </div>

 widgetsTS/widget_summary/view.js

@@ -76,7 +76,7 @@

function reloadData() {
    $("#top10Tb").empty();
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex + "&pageno=1&pagesize=20";
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex + "&pageno=1&pagesize=30";
    //加入cntId
    $.ajax({
        type: 'get',