feat(visual): 优化GIS页面UI并整合实时数据加载
This commit is contained in:
Rue Ji
@ -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;
|
||||
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 {
|
||||
rate = parmvalue;
|
||||
$('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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折线图--单点
|
||||
|
||||
@ -268,7 +268,7 @@ pageEncoding="UTF-8"%>
|
||||
margin-top: 0;
|
||||
"
|
||||
>
|
||||
污水厂查询
|
||||
污水厂详情
|
||||
</h5>
|
||||
|
||||
<!-- <div
|
||||
@ -361,10 +361,10 @@ pageEncoding="UTF-8"%>
|
||||
<th width="40">序号</th>
|
||||
<th width="40">选择</th>
|
||||
<th>名称</th>
|
||||
<th>出口流量<br />(m³/h)</th>
|
||||
<th>入口流量<br />(m³/h)</th>
|
||||
<th>出口流量(m³/h)</th>
|
||||
<th>入口流量(m³/h)</th>
|
||||
<th>状态</th>
|
||||
<th>设计能力<br />(万吨/天)</th>
|
||||
<th>设计能力(万吨/天)</th>
|
||||
<th>详细地址</th>
|
||||
<th>监测时间</th>
|
||||
</tr>
|
||||
@ -384,7 +384,7 @@ pageEncoding="UTF-8"%>
|
||||
margin-top: 0;
|
||||
"
|
||||
>
|
||||
泵站查询
|
||||
泵站详情
|
||||
</h5>
|
||||
|
||||
<!-- <div
|
||||
@ -476,7 +476,7 @@ pageEncoding="UTF-8"%>
|
||||
margin-top: 0;
|
||||
"
|
||||
>
|
||||
企业查询
|
||||
企业详情
|
||||
</h5>
|
||||
|
||||
<!-- 查询条件 -->
|
||||
@ -547,7 +547,16 @@ pageEncoding="UTF-8"%>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="max-height: 400px; overflow-y: auto">
|
||||
<div style="max-height: 400px; overflow-y: auto" id="company-table-container">
|
||||
<div id="company-loading" style="display: none; text-align: center; padding: 20px;">
|
||||
<i class="glyphicon glyphicon-refresh" style="font-size: 24px; color: #007bff; animation: spin 1s infinite linear;"></i>
|
||||
<p style="margin-top: 10px; color: #666; font-size: 12px">数据加载中...</p>
|
||||
<style>
|
||||
@keyframes spin {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
<table
|
||||
class="table table-bordered table-hover table-condensed table-custom"
|
||||
style="font-size: 12px; white-space: nowrap"
|
||||
@ -581,7 +590,7 @@ pageEncoding="UTF-8"%>
|
||||
margin-top: 0;
|
||||
"
|
||||
>
|
||||
管道查询
|
||||
管道详情
|
||||
</h5>
|
||||
|
||||
<!-- <div
|
||||
@ -1005,6 +1014,7 @@ pageEncoding="UTF-8"%>
|
||||
<!-- Scripts -->
|
||||
<script src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="<%=request.getContextPath()%>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/main/main_js.js" charset="utf-8"></script>
|
||||
|
||||
<!-- Tianditu Map API -->
|
||||
<!-- 704ebaecb29ce869b41f7d64a88919bc -->
|
||||
@ -1014,147 +1024,37 @@ pageEncoding="UTF-8"%>
|
||||
></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 坐标转换工具 (百度 BD-09 <-> 火星 GCJ-02 <-> 天地图/GPS WGS-84)
|
||||
var CoordTransform = {
|
||||
x_pi: (3.14159265358979324 * 3000.0) / 180.0,
|
||||
pi: 3.1415926535897932384626,
|
||||
a: 6378245.0,
|
||||
ee: 0.00669342162296594323,
|
||||
|
||||
// 百度坐标 (BD-09) 转 火星坐标 (GCJ-02)
|
||||
bd09_to_gcj02: function (bd_lon, bd_lat) {
|
||||
var x = bd_lon - 0.0065;
|
||||
var y = bd_lat - 0.006;
|
||||
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
|
||||
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
|
||||
var gg_lng = z * Math.cos(theta);
|
||||
var gg_lat = z * Math.sin(theta);
|
||||
return [gg_lng, gg_lat];
|
||||
},
|
||||
|
||||
// 火星坐标 (GCJ-02) 转 GPS 坐标 (WGS-84)
|
||||
gcj02_to_wgs84: function (lng, lat) {
|
||||
if (this.out_of_china(lng, lat)) {
|
||||
return [lng, lat];
|
||||
}
|
||||
var dlat = this.transformlat(lng - 105.0, lat - 35.0);
|
||||
var dlng = this.transformlng(lng - 105.0, lat - 35.0);
|
||||
var radlat = (lat / 180.0) * this.pi;
|
||||
var magic = Math.sin(radlat);
|
||||
magic = 1 - this.ee * magic * magic;
|
||||
var sqrtmagic = Math.sqrt(magic);
|
||||
dlat =
|
||||
(dlat * 180.0) /
|
||||
(((this.a * (1 - this.ee)) / (magic * sqrtmagic)) * this.pi);
|
||||
dlng =
|
||||
(dlng * 180.0) /
|
||||
((this.a / sqrtmagic) * Math.cos(radlat) * this.pi);
|
||||
var mglat = lat + dlat;
|
||||
var mglng = lng + dlng;
|
||||
return [lng * 2 - mglng, lat * 2 - mglat];
|
||||
},
|
||||
|
||||
// 百度坐标 (BD-09) 直接转 天地图/GPS 坐标 (WGS-84)
|
||||
bd09_to_wgs84: function (bd_lon, bd_lat) {
|
||||
var gcj = this.bd09_to_gcj02(bd_lon, bd_lat);
|
||||
var wgs = this.gcj02_to_wgs84(gcj[0], gcj[1]);
|
||||
return wgs;
|
||||
},
|
||||
|
||||
transformlat: function (lng, lat) {
|
||||
var ret =
|
||||
-100.0 +
|
||||
2.0 * lng +
|
||||
3.0 * lat +
|
||||
0.2 * lat * lat +
|
||||
0.1 * lng * lat +
|
||||
0.2 * Math.sqrt(Math.abs(lng));
|
||||
ret +=
|
||||
((20.0 * Math.sin(6.0 * lng * this.pi) +
|
||||
20.0 * Math.sin(2.0 * lng * this.pi)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((20.0 * Math.sin(lat * this.pi) +
|
||||
40.0 * Math.sin((lat / 3.0) * this.pi)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((160.0 * Math.sin((lat / 12.0) * this.pi) +
|
||||
320 * Math.sin((lat * this.pi) / 30.0)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
return ret;
|
||||
},
|
||||
|
||||
transformlng: function (lng, lat) {
|
||||
var ret =
|
||||
300.0 +
|
||||
lng +
|
||||
2.0 * lat +
|
||||
0.1 * lng * lng +
|
||||
0.1 * lng * lat +
|
||||
0.1 * Math.sqrt(Math.abs(lng));
|
||||
ret +=
|
||||
((20.0 * Math.sin(6.0 * lng * this.pi) +
|
||||
20.0 * Math.sin(2.0 * lng * this.pi)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((20.0 * Math.sin(lng * this.pi) +
|
||||
40.0 * Math.sin((lng / 3.0) * this.pi)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((150.0 * Math.sin((lng / 12.0) * this.pi) +
|
||||
300.0 * Math.sin((lng / 30.0) * this.pi)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
return ret;
|
||||
},
|
||||
|
||||
out_of_china: function (lng, lat) {
|
||||
return (
|
||||
lng < 72.004 ||
|
||||
lng > 137.8347 ||
|
||||
lat < 0.8293 ||
|
||||
lat > 55.8271 ||
|
||||
false
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// Initialize Map
|
||||
// Tianditu uses CGCS2000/WGS84 coordinates.
|
||||
// Center on Shanghai Jinshan District
|
||||
console.log("=== newSourceGISPage.jsp 页面已加载 ===");
|
||||
var map = new T.Map("map-container");
|
||||
map.centerAndZoom(new T.LngLat(121.34, 30.74), 13);
|
||||
map.centerAndZoom(new T.LngLat(121.34, 30.74), 16);
|
||||
map.enableScrollWheelZoom();
|
||||
|
||||
// 记录当前缩放级别，用于限制只能放大不能缩小
|
||||
var currentZoomLevel = 13;
|
||||
var minZoomLevel = 13; // 最小缩放级别
|
||||
// // 记录当前缩放级别，用于限制只能放大不能缩小
|
||||
// var currentZoomLevel = 13;
|
||||
// var minZoomLevel = 13; // 最小缩放级别
|
||||
|
||||
// 监听缩放开始事件，阻止缩小操作
|
||||
map.addEventListener("zoomstart", function(e) {
|
||||
var newZoom = e.zoom;
|
||||
console.log("[地图缩放] 当前级别:", currentZoomLevel, "目标级别:", newZoom);
|
||||
if (newZoom < minZoomLevel) {
|
||||
console.log("[地图缩放] 阻止缩小操作，最小级别:", minZoomLevel);
|
||||
map.setZoom(minZoomLevel);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
// // 监听缩放开始事件，阻止缩小操作
|
||||
// map.addEventListener("zoomstart", function(e) {
|
||||
// var newZoom = e.zoom;
|
||||
// console.log("[地图缩放] 当前级别:", currentZoomLevel, "目标级别:", newZoom);
|
||||
// if (newZoom < minZoomLevel) {
|
||||
// console.log("[地图缩放] 阻止缩小操作，最小级别:", minZoomLevel);
|
||||
// map.setZoom(minZoomLevel);
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
|
||||
// 监听缩放结束事件，更新当前缩放级别
|
||||
map.addEventListener("zoomend", function(e) {
|
||||
currentZoomLevel = map.getZoom();
|
||||
console.log("[地图缩放] 缩放完成，当前级别:", currentZoomLevel);
|
||||
});
|
||||
// // 监听缩放结束事件，更新当前缩放级别
|
||||
// map.addEventListener("zoomend", function(e) {
|
||||
// currentZoomLevel = map.getZoom();
|
||||
// console.log("[地图缩放] 缩放完成，当前级别:", currentZoomLevel);
|
||||
// });
|
||||
|
||||
// 禁用双击缩小
|
||||
map.disableDoubleClickZoom();
|
||||
// // 禁用双击缩小
|
||||
// map.disableDoubleClickZoom();
|
||||
|
||||
// Controls
|
||||
var scale = new T.Control.Scale();
|
||||
@ -1164,18 +1064,18 @@ pageEncoding="UTF-8"%>
|
||||
var mapType = new T.Control.MapType();
|
||||
map.addControl(mapType);
|
||||
|
||||
// 隐藏缩小按钮，只保留放大按钮
|
||||
setTimeout(function() {
|
||||
var zoomOutBtn = document.querySelector(".TMAP_zoom_button");
|
||||
if (zoomOutBtn) {
|
||||
// 隐藏所有缩放按钮中的缩小按钮
|
||||
var zoomButtons = document.querySelectorAll(".TMAP_zoom_button");
|
||||
if (zoomButtons.length > 0) {
|
||||
zoomButtons[0].style.display = "none"; // 隐藏缩小按钮
|
||||
}
|
||||
}
|
||||
console.log("[地图控制] 已隐藏缩小按钮");
|
||||
}, 500);
|
||||
// // 隐藏缩小按钮，只保留放大按钮
|
||||
// setTimeout(function() {
|
||||
// var zoomOutBtn = document.querySelector(".TMAP_zoom_button");
|
||||
// if (zoomOutBtn) {
|
||||
// // 隐藏所有缩放按钮中的缩小按钮
|
||||
// var zoomButtons = document.querySelectorAll(".TMAP_zoom_button");
|
||||
// if (zoomButtons.length > 0) {
|
||||
// zoomButtons[0].style.display = "none"; // 隐藏缩小按钮
|
||||
// }
|
||||
// }
|
||||
// console.log("[地图控制] 已隐藏缩小按钮");
|
||||
// }, 500);
|
||||
// var mousePosition = new T.Control.MousePosition({position: T_ANCHOR_BOTTOM_RIGHT});
|
||||
// map.addControl(mousePosition);
|
||||
|
||||
@ -1213,17 +1113,25 @@ pageEncoding="UTF-8"%>
|
||||
api: { url: '/user/processSection/getProcessSection4Select.do', mock: false, params: { companyId: 'JSBZ' } },
|
||||
tableBody: 'pump-table-body',
|
||||
icon: 'icon_bz.png',
|
||||
// 泵站名称到经纬度的映射
|
||||
lngLatMap: {
|
||||
'卫八路泵站': { lng: 121.277502, lat: 30.720661 },
|
||||
'春华泵站': { lng: 121.287567, lat: 30.727986 },
|
||||
'九号泵站': { lng: 121.286513, lat: 30.716669 }
|
||||
},
|
||||
transform: function(item, idx) {
|
||||
var name = item.text || item.name || '';
|
||||
var lngLat = this.lngLatMap[name] || { lng: 121.32 + idx * 0.01, lat: 30.76 - idx * 0.005 };
|
||||
return {
|
||||
id: item.id || 'pump_' + idx,
|
||||
name: item.text || item.name || '',
|
||||
name: name,
|
||||
code: item.id || '',
|
||||
level: '-',
|
||||
flow: '-',
|
||||
status: '-',
|
||||
time: '-',
|
||||
lng: 121.32 + idx * 0.01,
|
||||
lat: 30.76 - idx * 0.005
|
||||
lng: lngLat.lng,
|
||||
lat: lngLat.lat
|
||||
};
|
||||
}
|
||||
},
|
||||
@ -1329,21 +1237,42 @@ pageEncoding="UTF-8"%>
|
||||
};
|
||||
|
||||
// ==================== 统一API请求 ====================
|
||||
// 获取点位实时值（封装方法）
|
||||
function getMpointValue(unitId, mpointCode) {
|
||||
return new Promise(function(resolve) {
|
||||
$.get(contextPath + '/work/mpoint/getValue.do?unitId=' + unitId + '&mpointCode=' + mpointCode, function(data) {
|
||||
try {
|
||||
var d = typeof data === 'string' ? eval('(' + data + ')') : data;
|
||||
resolve(d.parmvalue || 0);
|
||||
} catch(e) {
|
||||
resolve(0);
|
||||
}
|
||||
}).fail(function() { resolve(0); });
|
||||
});
|
||||
}
|
||||
|
||||
function apiRequest(url, params, isMock, isStatic) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
if (isMock) {
|
||||
// Mock数据
|
||||
setTimeout(function() {
|
||||
if (url === '/api/sewage/list') {
|
||||
// 获取入口流量和出口流量的实时值
|
||||
var unitId = '0533JS';
|
||||
Promise.all([
|
||||
getMpointValue(unitId, 'C_Jsssll'),
|
||||
getMpointValue(unitId, 'C_Csssll')
|
||||
]).then(function(values) {
|
||||
resolve([{
|
||||
id: 1, name: '金山水卫污水厂', lng: 121.345, lat: 30.725,
|
||||
status: 0, address: '上海金山区金山水卫污水厂',
|
||||
inFlow: 4774, outFlow: 4536, designCapacity: 10, time: '02-25 17:24'
|
||||
id: 1, name: '上海金山卫污水处理有限公司', longitudeLatitude: '121.272242,30.708638',
|
||||
lng: '121.272242',
|
||||
lat: '30.708638',
|
||||
status: 0, address: '海金路958号',
|
||||
inFlow: values[0], outFlow: values[1], designCapacity: 10, time: new Date().toLocaleTimeString()
|
||||
}]);
|
||||
});
|
||||
} else {
|
||||
resolve([]);
|
||||
}
|
||||
}, 100);
|
||||
} else if (isStatic) {
|
||||
// 静态 JSON 文件请求（GET）
|
||||
$.ajax({
|
||||
@ -1731,14 +1660,28 @@ pageEncoding="UTF-8"%>
|
||||
config.loaded = false;
|
||||
config.data = [];
|
||||
|
||||
// 显示loading状态
|
||||
$('#company-loading').show();
|
||||
$('#company-table-body').empty();
|
||||
|
||||
// 获取动态参数
|
||||
var params = config.api.getParams();
|
||||
console.log('[企业查询] 查询参数:', params);
|
||||
|
||||
// 重新加载数据
|
||||
loadData('company').then(function() {
|
||||
// 隐藏loading
|
||||
$('#company-loading').hide();
|
||||
renderTable('company');
|
||||
initMarkers('company');
|
||||
|
||||
// 默认定位到第一个企业
|
||||
if (config.data.length > 0) {
|
||||
selectCompany(0);
|
||||
}
|
||||
}).catch(function() {
|
||||
// 隐藏loading
|
||||
$('#company-loading').hide();
|
||||
});
|
||||
}
|
||||
|
||||
@ -1850,15 +1793,31 @@ pageEncoding="UTF-8"%>
|
||||
};
|
||||
var type = typeMap[tabId] || 'sewage';
|
||||
|
||||
loadData(type).then(function() {
|
||||
renderTable(type);
|
||||
initMarkers(type);
|
||||
});
|
||||
|
||||
// 企业 Tab 初始化查询下拉选项
|
||||
if (type === 'company') {
|
||||
initCompanySearchOptions();
|
||||
// 显示loading状态
|
||||
$('#company-loading').show();
|
||||
}
|
||||
|
||||
loadData(type).then(function() {
|
||||
// 企业Tab加载完成后隐藏loading并定位到第一个企业
|
||||
if (type === 'company') {
|
||||
$('#company-loading').hide();
|
||||
renderTable(type);
|
||||
initMarkers(type);
|
||||
if (dataConfig.company.data.length > 0) {
|
||||
selectCompany(0);
|
||||
}
|
||||
} else {
|
||||
renderTable(type);
|
||||
initMarkers(type);
|
||||
}
|
||||
}).catch(function() {
|
||||
if (type === 'company') {
|
||||
$('#company-loading').hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== 抽屉和调整大小逻辑 ====================
|
||||
|
||||
Reference in New Issue
Block a user