From 40bdf8428336e29a77507cc8698f13a0b750a3b5 Mon Sep 17 00:00:00 2001
From: wangzhibo <wangzhibo@shsening.com>
Date: 星期二, 02 十一月 2021 20:27:13 +0800
Subject: [PATCH] add echart table
---
widgetsTS/widget_detail/view.js | 78 +++++++++++++++++++++++---------------
1 files changed, 47 insertions(+), 31 deletions(-)
diff --git a/widgetsTS/widget_detail/view.js b/widgetsTS/widget_detail/view.js
index 7a10e1f..0fbc671 100644
--- a/widgetsTS/widget_detail/view.js
+++ b/widgetsTS/widget_detail/view.js
@@ -1,27 +1,33 @@
var myCharts;
//瀵瑰簲widget.js涓璏yWidget瀹炰緥鍖栧悗鐨勫璞�
-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鐨勬椂鍊欙紝鎶樼嚎绗竴涓偣鍦▂杞翠笂
@@ -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锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
- 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锛媌ootstrap v3锛屼絾杩欎釜鎻掍欢浣跨敤鐨勬椂鍊欙紝骞舵病鏈夊拰V3鐩稿尮閰嶏紝浠嶇劧璋冪敤鐨勬槸bootstrap V2鐨勫浘鏍� 鎶奲ootcssVer鐨勫�肩洿鎺ヨ涓�3锛屽惁鍒檇atetimepicker涓嶄細鏄剧ず鍑轰笂銆佷笅涓湀鐨勭澶�
- 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, //濡傛灉涓簍rue, 楂樹寒褰撳墠鏃ユ湡
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;
--
Gitblit v1.9.1