添加详情局部查询

qinbo

2021-10-25 7b130e17c6f03acb292d088988071dd677d8b23c

添加详情局部查询

 widgetsTS/dataTime/widget.js

@@ -12,6 +12,20 @@
    (day > 9 ? day : ("0" + day)) + " " +
    (hours > 9 ? hours : ("0" + hours)) + ":00:00";
}

function getDefaultDateTimeLocal01() {
  var date = new Date;
  date.setHours(date.getHours() - 10);
  var year = date.getFullYear();//年
  var month = date.getMonth();//月
  var day = date.getDate();//日
  var hours = date.getHours();//时
  return year + "-" +
    ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
    (day > 9 ? day : ("0" + day)) + " " +
    (hours > 9 ? hours : ("0" + hours)) + ":00:00";
}

function getDefaultDateLocal() {
  var date = new Date;
  date.setDate(date.getDate() - 1);
@@ -54,6 +68,7 @@
    create() {
      this.defaultDate = getDefaultDateLocal();
      this.defaultDateTime = getDefaultDateTimeLocal();
      this.defaultDateTime01 = getDefaultDateTimeLocal01();
      
    }


 widgetsTS/widget_detail/view.css

@@ -50,3 +50,25 @@
.over_tr{
    background: rgba(255,87,34,.8) !important;
}

.talbe_style {
    padding: 5px;
    border: 0;
    font-size: 13px;
  }
  
  .talbe_style tr td {
    padding: 2px;
    text-align: left;
  }

  .nametd {
    width: 70px;
  }

  input, p {
    padding: 0;
    width: 50px;
  }

 

 widgetsTS/widget_detail/view.html

@@ -19,9 +19,30 @@
    <script type="text/javascript" src="../../js/changable_params.js"></script>
    <link href="./view.css" rel="stylesheet" type="text/css" />

    <link href="../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
    <script src="../../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script>
    <script src="../../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>

</head>

<body cl>
    <table id="paramView" class="talbe_style zbxd" style="display: block">
        <tr>
          <td class="nametd">开始时间：</td>
          <td>
            <input type='text' class="form-control date" id='appDateHourStart' name="appDateHourStart" />
          </td>
          <td class="nametd">结束时间：</td>
          <td>
            <input type='text' class="form-control date" id='appDateHourEnd' name="appDateHourEnd" />
          </td>
          <td>
            <button type="button" id="startQueryHistory" class="btn btn-primary" style="width:100px;"><span
                id="startQueryHistoryText">查询</span></button>
          </td>
        </tr>
      </table>
    <div class="layui-row">
        <div id="echart" style="width:100%;height:300px;"></div>
    </div>

 widgetsTS/widget_detail/view.js

@@ -4,9 +4,258 @@

//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget
    thisWidget = _thisWidget;
  console.log(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";
    // all 1006xx layer has the same legend ！！
    var layerid = thisWidget.config.params.layerid+"";

    var legendData = all_layer_legends[layerid.substring(0,4)];
    var legendData_selected = {};
    legendData.forEach(element => {
        if (element==thisWidget.config.params.selected_qindex.toUpperCase()){
            legendData_selected[element] =true;
        }else{
            legendData_selected[element] =false;
        }
    });
    
    if (legendData == null || legendData.length < 1) {
        return;
    }
    var colorData = echart_lines_color_list[thisWidget.config.params.layerid];
    var myItemStyle = {
        normal: {
            // 拐点上显示数值
            label: {
                show: true
            },
            borderColor: 'red', // 拐点边框颜色
            lineStyle: {
                width: 2, // 设置线宽
                type: 'solid' //'dotted'虚线 'solid'实线
            }
        }
    };
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false,//同步
        url: backend_url,
        success: function (data) {
            console.log(data);
            var tableData = data.data.result;
            if (tableData != null && tableData.length > 0) {
                var seriesObj = {};
                var seriesData = [];
                var timeLineData = [];
                for (var i = 0; i < legendData.length; i++) {
                    var singleLegend = legendData[i];
                    var sdata = {};
                    sdata.name = singleLegend;
                    sdata.data = [];
                    sdata.type = 'line';
                    sdata.symbolSize = 8;
                    if (singleLegend.toUpperCase()=='CO'){
                        sdata.yAxisIndex =1;
                    }
                    sdata.itemStyle = myItemStyle;
                    seriesObj[singleLegend] = sdata;
                }
                for (var i = 0; i < tableData.length; i++) {
                    var indexObj = tableData[i];
                    timeLineData.push(shortenLegendTimeString(thisWidget.config.params.datatype, indexObj.datatime));
                    for (var j = 0; j < legendData.length; j++) {
                        var singleLegend = legendData[j];
                        var sdata = seriesObj[singleLegend];
                        sdata.data.push(indexObj[singleLegend])
                    }
                }
                for (var i = 0; i < legendData.length; i++) {
                    var singleLegend = legendData[i];
                    var mySeries = seriesObj[singleLegend];
                    seriesData.push(mySeries);
                }

                options = {
                    title: {
                        text: tableData[0]["name"],
                        textStyle: {
                            color: '#87CEFA', //颜色
                        },
                        top: '20px',
                        x: 'center'
                    },
                    legend: {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'horizontal',
                        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'center',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: 'top',
                        textStyle: { //图例文字的样式
                            color: '#87CEFA',
                        },
                        data: legendData,
                        selected:legendData_selected,
                        color: 'white'
                    },

                    //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                    grid: {
                        top: '20%', // 等价于 y: '16%'
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },

                    // 提示框
                    tooltip: {
                        trigger: 'axis'
                    },

                    toolbox:{
                        feature: {
                            saveAsImage: { type:'jpeg'},
                            dataView: {},
                            magicType: {
                                type: ['line', 'bar'],
                                option: {
                                    // 类型切换时，下述配置项将被merge到对应类型的图表 series 中
                                    line: { smooth: true },
                                    bar: { label: { show: true } }
                                }
                            },
                        }
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                // 设置x轴颜色
                                color: '#87CEFA'
                            }
                        },
                        // 设置X轴数据旋转倾斜
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
                            formatter: '{value} 时'
                           
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
                        boundaryGap: false,
                        data: timeLineData,
                        axisLine: {
                            symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                            symbolOffset: [0, 8], //箭头段移动8个像素
                        }
                    },
                    yAxis: [{
                        name: '指标(μg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#87CEFA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                    },{
                        name: 'CO(mg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#8700FA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                    }],
                    series: seriesData,
                    color: colorData
                };
                myCharts = echarts.init(document.getElementById('echart'));
                myCharts.setOption(options, true);
                window.onresize = function(){
                    myCharts.resize();                
                }
            }else{
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
        error: function (request, textStatus) {
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });

  });

}

// 查询
// function resetStartQueryHistoryText(code) {
//     $("#startQueryHistory").text("查询");
//   }

function DatePicker(beginSelector, endSelector) {
    $(beginSelector).datetimepicker(
      {
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: 'yyyy-mm-dd hh:ii:00',
        minView: 'day',//设置时间选择为年月日 去掉时分秒选择
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
        autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1,  //如果为true, 高亮当前日期
        endDate: new Date()
      }).on('changeDate', function (ev) {
        if (ev.date) {
          $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        } else {
          $(endSelector).datetimepicker('setStartDate', null);
        }
        thisWidget.appDateHourStart = $(beginSelector).val();
      })
    $(endSelector).datetimepicker(
      {
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: 'yyyy-mm-dd hh:ii:00',
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
        autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1,  //如果为true, 高亮当前日期
        endDate: new Date()
      }).on('changeDate', function (ev) {
        thisWidget.appDateHourEnd = $(endSelector).val();
      })
  }



  /////
function reloadData(params) {

    loadLineChartbySiteid(params);
@@ -212,7 +461,9 @@
                        // 设置X轴数据旋转倾斜
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
                            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
                            formatter: '{value} 时'
                           
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
                        boundaryGap: false,

 widgetsTS/widget_detail/widget.js

@@ -1,6 +1,5 @@
'use script' //开发环境建议开启严格模式
    ;
(function (window, mars3d) {
;(function (window, mars3d) {
    //创建widget类，需要继承BaseWidget
    class MyWidget extends mars3d.widget.BaseWidget {
        //弹窗配置，2个弹窗的情形
@@ -25,6 +24,10 @@
        }
        reloadData(params) {
            this.winPage.reloadData(params);

            // this.appDateHourStart = mars3d.global_variables.queryDataTEnd01;
            // this.appDateHourEnd = mars3d.global_variables.queryDataTStart;

        }

        //每个窗口创建完成后调用
@@ -33,6 +36,8 @@
            this.nodejs_url_predix = mars3d.global_variables.nodejs_url_predix;
            this.winPage.reloadData(this.config.params);

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