From 7b130e17c6f03acb292d088988071dd677d8b23c Mon Sep 17 00:00:00 2001
From: qinbo <qinbo@shsening.com>
Date: 星期一, 25 十月 2021 18:27:32 +0800
Subject: [PATCH] 添加详情局部查询
---
widgetsTS/widget_detail/view.js | 255 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 253 insertions(+), 2 deletions(-)
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,
--
Gitblit v1.9.1