From 7048001c0c4d6b593ae9760b2024dcb3d096dbe1 Mon Sep 17 00:00:00 2001 From: Rue Ji Date: Thu, 26 Mar 2026 00:28:34 +0800 Subject: [PATCH] =?UTF-8?q?feat(visual):=20=E4=BC=98=E5=8C=96GIS=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2UI=E5=B9=B6=E6=95=B4=E5=90=88=E5=AE=9E=E6=97=B6?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/JS/main/main_js.js | 597 +++++++++--------- .../webapp/jsp/visual/newSourceGISPage.jsp | 295 ++++----- 2 files changed, 415 insertions(+), 477 deletions(-) diff --git a/src/main/webapp/JS/main/main_js.js b/src/main/webapp/JS/main/main_js.js index 07312a0c..2daa0041 100644 --- a/src/main/webapp/JS/main/main_js.js +++ b/src/main/webapp/JS/main/main_js.js @@ -8,83 +8,7 @@ * @param valueId * @param textId */ -function getValue(unitId, mpointCode, valueId, textId) { - // var data = { - // "confirmalarm": "0", - // "parmname": "进水瞬时流量", - // "signaltag": "", - // "soundalarm": "0", - // "remoteup": "0", - // "triggercycle": "0", - // "triggermutation": "0", - // "ledcolor": "1", - // "id": "C_Jsssll", - // "numtail": "0", - // "signaltype": "AI", - // "active": "启用", - // "flowset": 0, - // "unit": "m³/h", - // "sourceType": "auto", - // "mpointcode": "C_Jsssll", - // "triggerequoff": "0", - // "disname": "", - // "valuetype": "sql", - // "directtype": "1", - // "freq": 1, - // "morder": 999, - // "showname": "1", - // "rate": 1, - // "subscriptionStatus": 0, - // "mpointid": "C_Jsssll", - // "valuemeaning": "", - // "mathop": "*", - // "triggeralarm": "1", - // "equipmentid": "", - // "biztype": "", - // "parmvalue": 3551, - // "ledtype": "1", - // "measuredt": "2026-03-11T17:05:43Z", - // "bizid": "0533JS" - // } - // - // $('#' + valueId).html(data.parmvalue);//赋值 - // if (data.unit == undefined) { - // $('#' + textId).html(data.parmname);//赋值名称 - // } else { - // $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位 - // } - // $.ajax({ - // type: 'GET', - // url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode, - // async: true, - // globle: false, - // error: function () { - // return false; - // }, - // success: function (data) { - // if (data != null && data != '') { - // var data = eval('(' + data + ')'); - // //只限制上限为0.8 下限根据设定值自己设 - // // var maxvalue = data.alarmmax/0.8; - // // var minvalue = data.alarmmin/maxvalue; - // // var acvalue = data.parmvalue/maxvalue*100; - // $('#' + valueId).html(data.parmvalue);//赋值 - // if (data.unit == undefined) { - // $('#' + textId).html(data.parmname);//赋值名称 - // } else { - // $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位 - // } - // } - // } - // }); - -} - -/** - * echart饼图--通用 - */ -function echartPie2(unitId, mpointCode, echartId, textId) { - var myChart = echarts.init(document.getElementById(echartId)); +function getValue4Es(unitId, mpointCode, valueId, textId) { $.ajax({ type: 'GET', url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode, @@ -95,113 +19,168 @@ function echartPie2(unitId, mpointCode, echartId, textId) { }, success: function (data) { if (data != null && data != '') { - var echart_minvalue = 0.2; - var echart_maxvalue = 0.8; - - // var data = eval('(' + data + ')'); - //180度的上限 - var maxvalue_20 = data.alarmmax * 1.2; - //0度的下限 - var minvalue_20 = data.alarmmin - data.alarmmin * 0.2; - - var maxvalue = data.alarmmax; - var minvalue = data.alarmmin; - - //判断是否需要下限 - if (data.alarmmin == null || data.alarmmin == '') { - minvalue_20 = 0; - minvalue = 0; - echart_minvalue = 0; - } - - var parmvalue = data.parmvalue; - var rate = 0; - var unit = ''; - - $('#' + textId).html(data.parmname); - - if (data.unit != undefined && data.unit != null && data.unit != '') { - unit = '(' + data.unit + ')'; - } - - //计算实际值比例 - if (maxvalue_20 <= 1) { - minvalue_20 = minvalue_20 * 100; - maxvalue_20 = maxvalue_20 * 100; - parmvalue = parmvalue * 100; - minvalue = minvalue * 100; - maxvalue = maxvalue * 100; - if (maxvalue != undefined && minvalue != undefined) { - rate = parmvalue / (maxvalue_20 - minvalue_20) * 100; - } else { - rate = parmvalue; - } - - rate += 20; + var data = eval('(' + data + ')'); + //只限制上限为0.8 下限根据设定值自己设 + // var maxvalue = data.alarmmax/0.8; + // var minvalue = data.alarmmin/maxvalue; + // var acvalue = data.parmvalue/maxvalue*100; + $('#' + valueId).html(data.parmvalue);//赋值 + if (data.unit == undefined) { + $('#' + textId).html(data.parmname);//赋值名称 } else { - if (maxvalue != undefined && minvalue != undefined) { - // rate = parmvalue / maxvalue_20 * 100; - rate = (parmvalue / maxvalue) * 0.8 * 100; - } else { - rate = parmvalue; - } + $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位 } - - //计算颜色 - var colorStr = '#6C6C6C'; - if (parmvalue < minvalue) { - colorStr = '#67e0e3'; - } else if (parmvalue > maxvalue) { - colorStr = '#fd666d'; - } else { - colorStr = '#37a2da'; - // 37a2da - } - - console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue); - - var option = { - toolbox: { //可视化的工具箱 - show: false, feature: { - restore: { //重置 - show: true - }, saveAsImage: {//保存图片 - show: true - } - } - }, series: [{ - name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置 - axisLine: { - show: true, // 属性lineStyle控制线条样式 - lineStyle: { - width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']] - color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']] - } - }, splitLine: { - show: false, - }, axisTick: { - show: false, - }, axisLabel: { - show: false, - }, pointer: { - length: '40px', width: '3px', - }, detail: { - offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname, - formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例 - }, data: [{value: rate}] - }] - }; - myChart.setOption(option); - myChart.resize(); - } } + } }); } +function getValue(unitId, mpointCode, valueId, textId) { + $.ajax({ + type: 'GET', + url: ext.contextPath + '/work/mpoint/getValue.do?unitId=' + unitId + '&mpointCode=' + mpointCode, + async: true, + globle: false, + error: function () { + return false; + }, + success: function (data) { + if (data != null && data != '') { + var data = eval('(' + data + ')'); + console.log(data); + $('#' + valueId).html(data.parmvalue);//赋值 + if (data.unit == undefined) { + $('#' + textId).html(data.parmname);//赋值名称 + } else { + $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位 + } + } + } + }); +} + +// /** +// * echart饼图--通用 -- 新 +// */ +// function echartPie2(unitId, mpointCode, echartId, textId) { +// var myChart = echarts.init(document.getElementById(echartId)); +// $.ajax({ +// type: 'GET', +// url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode, +// async: true, +// globle: false, +// error: function () { +// return false; +// }, +// success: function (data) { +// if (data != null && data != '') { +// var echart_minvalue = 0.2; +// var echart_maxvalue = 0.8; + +// // var data = eval('(' + data + ')'); +// //180度的上限 +// var maxvalue_20 = data.alarmmax * 1.2; +// //0度的下限 +// var minvalue_20 = data.alarmmin - data.alarmmin * 0.2; + +// var maxvalue = data.alarmmax; +// var minvalue = data.alarmmin; + +// //判断是否需要下限 +// if (data.alarmmin == null || data.alarmmin == '') { +// minvalue_20 = 0; +// minvalue = 0; +// echart_minvalue = 0; +// } + +// var parmvalue = data.parmvalue; +// var rate = 0; +// var unit = ''; + +// $('#' + textId).html(data.parmname); + +// if (data.unit != undefined && data.unit != null && data.unit != '') { +// unit = '(' + data.unit + ')'; +// } + +// //计算实际值比例 +// if (maxvalue_20 <= 1) { +// minvalue_20 = minvalue_20 * 100; +// maxvalue_20 = maxvalue_20 * 100; +// parmvalue = parmvalue * 100; +// minvalue = minvalue * 100; +// maxvalue = maxvalue * 100; +// if (maxvalue != undefined && minvalue != undefined) { +// rate = parmvalue / (maxvalue_20 - minvalue_20) * 100; +// } else { +// rate = parmvalue; +// } + +// rate += 20; +// } else { +// if (maxvalue != undefined && minvalue != undefined) { +// // rate = parmvalue / maxvalue_20 * 100; +// rate = (parmvalue / maxvalue) * 0.8 * 100; +// } else { +// rate = parmvalue; +// } +// } + +// //计算颜色 +// var colorStr = '#6C6C6C'; +// if (parmvalue < minvalue) { +// colorStr = '#67e0e3'; +// } else if (parmvalue > maxvalue) { +// colorStr = '#fd666d'; +// } else { +// colorStr = '#37a2da'; +// // 37a2da +// } + +// console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue); + +// var option = { +// toolbox: { //可视化的工具箱 +// show: false, feature: { +// restore: { //重置 +// show: true +// }, saveAsImage: {//保存图片 +// show: true +// } +// } +// }, series: [{ +// name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置 +// axisLine: { +// show: true, // 属性lineStyle控制线条样式 +// lineStyle: { +// width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']] +// color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']] +// } +// }, splitLine: { +// show: false, +// }, axisTick: { +// show: false, +// }, axisLabel: { +// show: false, +// }, pointer: { +// length: '40px', width: '3px', +// }, detail: { +// offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname, +// formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例 +// }, data: [{value: rate}] +// }] +// }; +// myChart.setOption(option); +// myChart.resize(); +// } +// } +// }); +// } + /** * echart饼图--通用 */ -function echartPie1(unitId, mpointCode, echartId, textId) { +function echartPie(unitId, mpointCode, echartId, textId) { var myChart = echarts.init(document.getElementById(echartId)); $.ajax({ type: 'GET', @@ -316,153 +295,153 @@ function echartPie1(unitId, mpointCode, echartId, textId) { } -/** - * echart饼图--通用 - */ -function echartPie(unitId, mpointCode, echartId, textId) { - var myChart = echarts.init(document.getElementById(echartId)); - var data = { - "confirmalarm": "0", - "parmname": "进水PH", - "signaltag": "", - "soundalarm": "0", - "remoteup": "0", - "triggercycle": "0", - "triggermutation": "0", - "ledcolor": "1", - "id": "D_JinSPH", - "numtail": "0", - "signaltype": "AI", - "active": "启用", - "flowset": 0, - "unit": "mg/l", - "sourceType": "auto", - "mpointcode": "D_JinSPH", - "triggerequoff": "0", - "disname": "", - "valuetype": "sql", - "directtype": "1", - "freq": 1, - "morder": 999, - "showname": "1", - "rate": 1, - "subscriptionStatus": 0, - "mpointid": "D_JinSPH", - "valuemeaning": "", - "mathop": "*", - "triggeralarm": "1", - "equipmentid": "", - "biztype": "", - "parmvalue": 20, - "alarmmax": 14, - "alarmmin": 6, - "ledtype": "1", - "measuredt": "2026-03-11T18:20:27Z", - "bizid": "0533JS" - }; +// /** +// * echart饼图--通用--新 +// */ +// function echartPie(unitId, mpointCode, echartId, textId) { +// var myChart = echarts.init(document.getElementById(echartId)); +// var data = { +// "confirmalarm": "0", +// "parmname": "进水PH", +// "signaltag": "", +// "soundalarm": "0", +// "remoteup": "0", +// "triggercycle": "0", +// "triggermutation": "0", +// "ledcolor": "1", +// "id": "D_JinSPH", +// "numtail": "0", +// "signaltype": "AI", +// "active": "启用", +// "flowset": 0, +// "unit": "mg/l", +// "sourceType": "auto", +// "mpointcode": "D_JinSPH", +// "triggerequoff": "0", +// "disname": "", +// "valuetype": "sql", +// "directtype": "1", +// "freq": 1, +// "morder": 999, +// "showname": "1", +// "rate": 1, +// "subscriptionStatus": 0, +// "mpointid": "D_JinSPH", +// "valuemeaning": "", +// "mathop": "*", +// "triggeralarm": "1", +// "equipmentid": "", +// "biztype": "", +// "parmvalue": 20, +// "alarmmax": 14, +// "alarmmin": 6, +// "ledtype": "1", +// "measuredt": "2026-03-11T18:20:27Z", +// "bizid": "0533JS" +// }; - if (data != null && data != '') { - var echart_minvalue = 0.2; - var echart_maxvalue = 0.8; +// if (data != null && data != '') { +// var echart_minvalue = 0.2; +// var echart_maxvalue = 0.8; - // var data = eval('(' + data + ')'); - //180度的上限 - var maxvalue_20 = data.alarmmax * 1.2; - //0度的下限 - var minvalue_20 = data.alarmmin - data.alarmmin * 0.2; +// // var data = eval('(' + data + ')'); +// //180度的上限 +// var maxvalue_20 = data.alarmmax * 1.2; +// //0度的下限 +// var minvalue_20 = data.alarmmin - data.alarmmin * 0.2; - var maxvalue = data.alarmmax; - var minvalue = data.alarmmin; +// var maxvalue = data.alarmmax; +// var minvalue = data.alarmmin; - //判断是否需要下限 - if (data.alarmmin == null || data.alarmmin == '') { - minvalue_20 = 0; - minvalue = 0; - echart_minvalue = 0; - } +// //判断是否需要下限 +// if (data.alarmmin == null || data.alarmmin == '') { +// minvalue_20 = 0; +// minvalue = 0; +// echart_minvalue = 0; +// } - var parmvalue = data.parmvalue; - var rate = 0; - var unit = ''; +// var parmvalue = data.parmvalue; +// var rate = 0; +// var unit = ''; - $('#' + textId).html(data.parmname); +// $('#' + textId).html(data.parmname); - if (data.unit != undefined && data.unit != null && data.unit != '') { - unit = '(' + data.unit + ')'; - } +// if (data.unit != undefined && data.unit != null && data.unit != '') { +// unit = '(' + data.unit + ')'; +// } - //计算实际值比例 - if (maxvalue_20 <= 1) { - minvalue_20 = minvalue_20 * 100; - maxvalue_20 = maxvalue_20 * 100; - parmvalue = parmvalue * 100; - minvalue = minvalue * 100; - maxvalue = maxvalue * 100; - if (maxvalue != undefined && minvalue != undefined) { - rate = parmvalue / (maxvalue_20 - minvalue_20) * 100; - } else { - rate = parmvalue; - } +// //计算实际值比例 +// if (maxvalue_20 <= 1) { +// minvalue_20 = minvalue_20 * 100; +// maxvalue_20 = maxvalue_20 * 100; +// parmvalue = parmvalue * 100; +// minvalue = minvalue * 100; +// maxvalue = maxvalue * 100; +// if (maxvalue != undefined && minvalue != undefined) { +// rate = parmvalue / (maxvalue_20 - minvalue_20) * 100; +// } else { +// rate = parmvalue; +// } - rate += 20; - } else { - if (maxvalue != undefined && minvalue != undefined) { - // rate = parmvalue / maxvalue_20 * 100; - rate = (parmvalue / maxvalue) * 0.8 * 100; - } else { - rate = parmvalue; - } - } +// rate += 20; +// } else { +// if (maxvalue != undefined && minvalue != undefined) { +// // rate = parmvalue / maxvalue_20 * 100; +// rate = (parmvalue / maxvalue) * 0.8 * 100; +// } else { +// rate = parmvalue; +// } +// } - //计算颜色 - var colorStr = '#6C6C6C'; - if (parmvalue < minvalue) { - colorStr = '#67e0e3'; - } else if (parmvalue > maxvalue) { - colorStr = '#fd666d'; - } else { - colorStr = '#37a2da'; - // 37a2da - } +// //计算颜色 +// var colorStr = '#6C6C6C'; +// if (parmvalue < minvalue) { +// colorStr = '#67e0e3'; +// } else if (parmvalue > maxvalue) { +// colorStr = '#fd666d'; +// } else { +// colorStr = '#37a2da'; +// // 37a2da +// } - console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue); +// console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue); - var option = { - toolbox: { //可视化的工具箱 - show: false, feature: { - restore: { //重置 - show: true - }, saveAsImage: {//保存图片 - show: true - } - } - }, series: [{ - name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置 - axisLine: { - show: true, // 属性lineStyle控制线条样式 - lineStyle: { - width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']] - color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']] - } - }, splitLine: { - show: false, - }, axisTick: { - show: false, - }, axisLabel: { - show: false, - }, pointer: { - length: '40px', width: '3px', - }, detail: { - offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname, - formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例 - }, data: [{value: rate}] - }] - }; - myChart.setOption(option); - myChart.resize(); - } -} +// var option = { +// toolbox: { //可视化的工具箱 +// show: false, feature: { +// restore: { //重置 +// show: true +// }, saveAsImage: {//保存图片 +// show: true +// } +// } +// }, series: [{ +// name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置 +// axisLine: { +// show: true, // 属性lineStyle控制线条样式 +// lineStyle: { +// width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']] +// color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']] +// } +// }, splitLine: { +// show: false, +// }, axisTick: { +// show: false, +// }, axisLabel: { +// show: false, +// }, pointer: { +// length: '40px', width: '3px', +// }, detail: { +// offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname, +// formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例 +// }, data: [{value: rate}] +// }] +// }; +// myChart.setOption(option); +// myChart.resize(); +// } +// } /** * echart折线图--单点 diff --git a/src/main/webapp/jsp/visual/newSourceGISPage.jsp b/src/main/webapp/jsp/visual/newSourceGISPage.jsp index 9bb6b900..c575f295 100644 --- a/src/main/webapp/jsp/visual/newSourceGISPage.jsp +++ b/src/main/webapp/jsp/visual/newSourceGISPage.jsp @@ -268,7 +268,7 @@ pageEncoding="UTF-8"%> margin-top: 0; " > - 污水厂查询 + 污水厂详情 @@ -547,7 +547,16 @@ pageEncoding="UTF-8"%> -
+
+ margin-top: 0; " > - 管道查询 + 管道详情 + @@ -1014,147 +1024,37 @@ pageEncoding="UTF-8"%> >