From 7b130e17c6f03acb292d088988071dd677d8b23c Mon Sep 17 00:00:00 2001
From: qinbo <qinbo@shsening.com>
Date: 星期一, 25 十月 2021 18:27:32 +0800
Subject: [PATCH] 添加详情局部查询
---
widgetsTS/dataTime/widget.js | 17 ++
widgetsTS/widget_detail/view.js | 255 ++++++++++++++++++++++++++++++++++++++++++
widgetsTS/widget_detail/widget.js | 13 +
widgetsTS/widget_detail/view.css | 24 +++
widgetsTS/widget_detail/view.html | 21 +++
5 files changed, 322 insertions(+), 8 deletions(-)
diff --git a/widgetsTS/dataTime/widget.js b/widgetsTS/dataTime/widget.js
index 96c01d9..3a530da 100644
--- a/widgetsTS/dataTime/widget.js
+++ b/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();
}
@@ -129,7 +144,7 @@
});
$("#appDateHour").datetimepicker("setDate", new Date(this.defaultDateTime));
$('#appDateHour').datetimepicker('setEndDate', new Date(this.defaultDateTime));
-
+
}
//婵�娲绘彃浠�
diff --git a/widgetsTS/widget_detail/view.css b/widgetsTS/widget_detail/view.css
index 01c54ee..7efb8d7 100644
--- a/widgetsTS/widget_detail/view.css
+++ b/widgetsTS/widget_detail/view.css
@@ -49,4 +49,26 @@
}
.over_tr{
background: rgba(255,87,34,.8) !important;
-}
\ No newline at end of file
+}
+
+.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;
+ }
+
+
\ No newline at end of file
diff --git a/widgetsTS/widget_detail/view.html b/widgetsTS/widget_detail/view.html
index 17014b2..a6a1dd8 100644
--- a/widgetsTS/widget_detail/view.html
+++ b/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>
diff --git a/widgetsTS/widget_detail/view.js b/widgetsTS/widget_detail/view.js
index 16bb18e..a6dd7c5 100644
--- a/widgetsTS/widget_detail/view.js
+++ b/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锛�
+ x: 'center',
+ // y 璁剧疆鍨傜洿瀹夋斁浣嶇疆锛岄粯璁ゅ叏鍥鹃《绔紝鍙�夊�硷細'top' 娄 'bottom' 娄 'center' 娄 {number}锛坹鍧愭爣锛屽崟浣峱x锛�
+ y: 'top',
+ textStyle: { //鍥句緥鏂囧瓧鐨勬牱寮�
+ color: '#87CEFA',
+ },
+ data: legendData,
+ selected:legendData_selected,
+ color: 'white'
+ },
+
+ // 鍥捐〃璺濊竟妗嗙殑璺濈,鍙�夊�硷細'鐧惧垎姣�'娄 {number}锛堝崟浣峱x锛�
+ 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: {
+ // 绫诲瀷鍒囨崲鏃讹紝涓嬭堪閰嶇疆椤瑰皢琚玬erge鍒板搴旂被鍨嬬殑鍥捐〃 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鐨勬椂鍊欙紝鎶樼嚎绗竴涓偣鍦▂杞翠笂
+ 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锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
+ 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, //濡傛灉涓簍rue, 楂樹寒褰撳墠鏃ユ湡
+ 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锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
+ 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, //濡傛灉涓簍rue, 楂樹寒褰撳墠鏃ユ湡
+ 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鐨勬椂鍊欙紝鎶樼嚎绗竴涓偣鍦▂杞翠笂
boundaryGap: false,
diff --git a/widgetsTS/widget_detail/widget.js b/widgetsTS/widget_detail/widget.js
index 87c66f6..2a06c7c 100644
--- a/widgetsTS/widget_detail/widget.js
+++ b/widgetsTS/widget_detail/widget.js
@@ -1,6 +1,5 @@
'use script' //寮�鍙戠幆澧冨缓璁紑鍚弗鏍兼ā寮�
- ;
-(function (window, mars3d) {
+;(function (window, mars3d) {
//鍒涘缓widget绫伙紝闇�瑕佺户鎵緽aseWidget
class MyWidget extends mars3d.widget.BaseWidget {
//寮圭獥閰嶇疆锛�2涓脊绐楃殑鎯呭舰
@@ -20,11 +19,15 @@
}
//鍒濆鍖朳浠呮墽琛�1娆
create() {
-
+
- }
+ }
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() {
--
Gitblit v1.9.1