xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页样式重新设计

Browse Source
This commit is contained in:
Rue Ji
2026-03-22 22:36:01 +08:00
parent acd1967b1f
commit 9a9a743945
8 changed files with 2799 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

805
src/main/webapp/JS/main/main_js.js
View File

@ -9,6 +9,82 @@
* @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));
$.ajax({
type: 'GET',
url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
@ -19,26 +95,113 @@ function getValue(unitId, mpointCode, valueId, textId) {
},
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 + ')');//赋值名称+单位
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 echartPie(unitId, mpointCode, echartId, textId) {
function echartPie1(unitId, mpointCode, echartId, textId) {
var myChart = echarts.init(document.getElementById(echartId));
$.ajax({
type: 'GET',
@ -152,6 +315,155 @@ function echartPie(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"
};
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折线图--单点
*/
@ -199,83 +511,420 @@ function echartLine(unitId, mpointCode, echartId) {
}
/**
* echart柱状图--单点
* echart混合图--双柱状+折线
*/
function echartColumnar(unitId, mpointCode, echartId) {
function echartMixed(unitId, mpointCode, echartId) {
var myChart = echarts.init(document.getElementById(echartId));
$.ajax({
type: 'GET',
url: ext.contextPath + '/work/mpoint/getValueMonth.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
async: true,
globle: false,
error: function () {
return false;
var datastr = {
"barData1": {
"name": "工业进水量",
"data": [89483, 96870, 85420, 92150, 88960, 95340, 91280]
},
success: function (data) {
var data = eval('(' + data + ')');
var option = {
color: '#62AEDF', tooltip: {
trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
}, xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
}, yAxis: {
type: 'value'
}, title: [{
left: 'center', text: data.name
}], grid: {
left: '3%', right: '4%', bottom: '3%', containLabel: true
}, series: [{
data: data.datalist, type: 'bar', showBackground: true
// backgroundStyle: {
// //color: '#62AEDF'
// }
}]
};
myChart.setOption(option);
myChart.resize();
}
});
"barData2": {
"name": "工业出水量",
"data": [87297, 88460, 82100, 89500, 85600, 91200, 88500]
},
"barData3": {
"name": "生活进水量",
"data": [89483, 96870, 85420, 92150, 88960, 95340, 91280]
},
"barData4": {
"name": "生活出水量",
"data": [87297, 88460, 82100, 89500, 85600, 91200, 88500]
},
"lineData": {
"name": "累计水量",
"data": [176780, 185330, 167520, 181650, 174560, 186540, 179780]
},
"timeJson": [
"2026-03-10",
"2026-03-11",
"2026-03-12",
"2026-03-13",
"2026-03-14",
"2026-03-15",
"2026-03-16"
]
};
var option = {
color: ['#67D89F', '#FFBB00', '#5B8FF9', '#F6903D', '#EE6666'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: [datastr.barData1.name, datastr.barData2.name, datastr.barData3.name, datastr.barData4.name, datastr.lineData.name]
},
xAxis: [{
type: 'category',
axisLabel: {
interval: 0
},
data: datastr.timeJson
}],
yAxis: [{
type: 'value',
name: '水量(m³)',
position: 'left'
}],
grid: {
left: '2%',
right: '5%',
bottom: '3%',
containLabel: true
},
series: [
{
name: datastr.barData1.name,
type: 'bar',
barWidth: 20,
data: datastr.barData1.data
},
{
name: datastr.barData2.name,
type: 'bar',
barWidth: 20,
data: datastr.barData2.data
},
{
name: datastr.barData3.name,
type: 'bar',
barWidth: 20,
data: datastr.barData3.data
},
{
name: datastr.barData4.name,
type: 'bar',
barWidth: 20,
data: datastr.barData4.data
},
{
name: datastr.lineData.name,
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
width: 2
},
data: datastr.lineData.data
}
]
};
myChart.setOption(option);
myChart.resize();
}
/**
* echart曲线图--单点
*/
function echartLine2(unitId, mpointCode, echartId) {
var myChart = echarts.init(document.getElementById(echartId));
var datastr = {
"dataJson": [
{
"data": [
89483.1,
96870.97,
85420.5,
92150.3,
88960.8,
95340.2,
91280.6
],
"name": "每日进水出水总量",
"type": "line",
"smooth": true,
"symbol": "circle",
"symbolSize": 6,
"lineStyle": {
"width": 2
},
"areaStyle": {
"opacity": 0.1
}
},
],
"timeJson": [
"2026-03-10",
"2026-03-11",
"2026-03-12",
"2026-03-13",
"2026-03-14",
"2026-03-15",
"2026-03-16"
]
}
var data1 = datastr.dataJson;
var data2 = datastr.timeJson;
var option = {
color: ['#67D89F', '#5B8FF9'],
tooltip: {
trigger: 'axis'
},
legend: {},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 0
},
data: data2
}],
yAxis: [{
type: 'value'
}],
grid: {
left: '2%',
right: '5%',
bottom: '3%',
containLabel: true
},
series: data1
};
myChart.setOption(option);
myChart.resize();
}
/**
* echart柱状图--单点
*/
function echartColumnar2(unitId, mpointCode, echartId) {
var myChart = echarts.init(document.getElementById(echartId));
var datastr = {
"dataJson": [
{
"barWidth": 30,
"stack": "total",
"data": [
89483.1,
96870.97,
0,
0,
0,
0,
0
],
"name": "每日进水量",
"label": {
"show": "true"
},
"type": "bar"
},
{
"barWidth": 30,
"stack": "total",
"data": [
87297.59,
88460.4,
0,
0,
0,
0,
0
],
"name": "每日出水量",
"label": {
"show": "true"
},
"type": "bar"
}
],
"timeJson": [
"2026-03-10",
"2026-03-11",
"2026-03-12",
"2026-03-13",
"2026-03-14",
"2026-03-15",
"2026-03-16"
]
}
var data1 = datastr.dataJson;
var data2 = datastr.timeJson;
var option = {
color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
type: 'category', axisLabel: {
interval: 0,//代表显示所有x轴标签显示
}, data: data2
}], yAxis: [{
type: 'value'
}], grid: {
left: '2%', right: '5%', bottom: '3%', containLabel: true
}, series: data1
};
myChart.setOption(option);
myChart.resize();
// $.ajax({
// type: 'GET',
// url: ext.contextPath + '/work/mpoint/getValueMonth.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
// async: true,
// globle: false,
// error: function () {
// return false;
// },
// success: function (data) {
// var data = eval('(' + data + ')');
// var option = {
// color: '#62AEDF', tooltip: {
// trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
// }
// }, xAxis: {
// type: 'category',
// data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
// }, yAxis: {
// type: 'value'
// }, title: [{
// left: 'center', text: data.name
// }], grid: {
// left: '3%', right: '4%', bottom: '3%', containLabel: true
// }, series: [{
// data: data.datalist, type: 'bar', showBackground: true
// // backgroundStyle: {
// // //color: '#62AEDF'
// // }
// }]
// };
// myChart.setOption(option);
// myChart.resize();
// }
// });
}
/**
* echart柱状图--多点
*/
function echartColumnar2(unitId, mpointCode, echartId) {
function echartColumnar1(unitId, mpointCode, echartId) {
var myChart = echarts.init(document.getElementById(echartId));
$.ajax({
type: 'GET',
url: ext.contextPath + '/work/mpoint/getValueWeekS.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
async: true,
globle: false,
error: function () {
return false;
},
success: function (data) {
var datastr = eval('(' + data + ')');
var data1 = datastr.dataJson;
var data2 = datastr.timeJson;
var datastr = {
"dataJson": [
{
"barWidth": 30,
"stack": "total",
"data": [
89483.1,
96870.97,
0,
0,
0,
0,
0
],
"name": "每日进水量",
"label": {
"show": "true"
},
"type": "bar"
},
{
"barWidth": 30,
"stack": "total",
"data": [
87297.59,
88460.4,
0,
0,
0,
0,
0
],
"name": "每日出水量",
"label": {
"show": "true"
},
"type": "bar"
}
var option = {
color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
type: 'category', axisLabel: {
interval: 0,//代表显示所有x轴标签显示
}, data: data2
}], yAxis: [{
type: 'value'
}], grid: {
left: '2%', right: '5%', bottom: '3%', containLabel: true
}, series: data1
};
myChart.setOption(option);
myChart.resize();
}
});
],
"timeJson": [
"2026-03-10",
"2026-03-11",
"2026-03-12",
"2026-03-13",
"2026-03-14",
"2026-03-15",
"2026-03-16"
]
}
var data1 = datastr.dataJson;
var data2 = datastr.timeJson;
// var option = {
// color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
// type: 'category', axisLabel: {
// interval: 0,//代表显示所有x轴标签显示
// }, data: data2
// }], yAxis: [{
// type: 'value'
// }], grid: {
// left: '2%', right: '5%', bottom: '3%', containLabel: true
// }, series: data1
// };
// myChart.setOption(option);
// myChart.resize();
var option = {
color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
type: 'category', axisLabel: {
interval: 0,//代表显示所有x轴标签显示
}, data: data2
}], yAxis: [{
type: 'value'
}], grid: {
left: '2%', right: '5%', bottom: '3%', containLabel: true
}, series: data1
};
myChart.setOption(option);
myChart.resize();
// $.ajax({
// type: 'GET',
// url: ext.contextPath + '/work/mpoint/getValueWeekS.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
// async: true,
// globle: false,
// error: function () {
// return false;
// },
// success: function (data) {
// var datastr = eval('(' + data + ')');
//
// var data1 = datastr.dataJson;
// var data2 = datastr.timeJson;
//
// var option = {
// color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
// type: 'category', axisLabel: {
// interval: 0,//代表显示所有x轴标签显示
// }, data: data2
// }], yAxis: [{
// type: 'value'
// }], grid: {
// left: '2%', right: '5%', bottom: '3%', containLabel: true
// }, series: data1
// };
// myChart.setOption(option);
// myChart.resize();
// }
// });
}
/**
@ -327,4 +976,6 @@ function proDatavisualFrame(unitId, proDatavisualFrameId) {
if (proDatavisualFrameId != null && proDatavisualFrameId != undefined && proDatavisualFrameId != '') {
parent.addTab(proDatavisualFrameId, '工艺可视化', 'process/dataVisualFrame/view.do?frameId=' + proDatavisualFrameId + '&unitId=' + unitId);
}
}
}