1078 lines
47 KiB
JavaScript
1078 lines
47 KiB
JavaScript
var fontcolor_grey = '#aeaeae';
|
||
var fontcolor_black = '#0d2336';
|
||
var color_blue = '#36FFF9';
|
||
var color_blue_other = '#1D4F6D';
|
||
var img_name = '';
|
||
var titleColor = '#ffffff';
|
||
var height = 1080;
|
||
var width = 1920;
|
||
var heightV =1;
|
||
var widthV =1;
|
||
var color = ['#ffff13','#31ff7d','#ff2ee3','#2e97ff','#ffb536'];
|
||
var bizid = "";
|
||
var jsp_id = "";
|
||
var left_top_height = 0;
|
||
var left_middle_height = 0;
|
||
var left_bottom_height = 0;
|
||
var center_top_height = 0;
|
||
var center_middle_height = 0;
|
||
var center_bottom_height = 0;
|
||
var right_top_height = 0;
|
||
var right_middle_height = 0;
|
||
var right_bottom_height = 0;
|
||
var selected_DailyWaterSupply = true;
|
||
var selected_RawWaterQuality = true;
|
||
var selectedAll = [];
|
||
function changeDataType(){
|
||
var dataType = $("#dataType").val();
|
||
if(dataType==3){
|
||
$("#proDatavisualFrameTitle").html("实时监视");
|
||
}
|
||
if(dataType==4){
|
||
$("#proDatavisualFrameTitle").html("摄像头");
|
||
}
|
||
if(dataType==1){
|
||
$("#unit").show();
|
||
$("#proDatavisualFrame").hide();
|
||
}else{
|
||
$("#proDatavisualFrame").show();
|
||
$("#unit").hide();
|
||
}
|
||
}
|
||
|
||
function showDatavisualFrame4Select(hiddenId,textId,id){
|
||
var dataType = $("#dataType").val();
|
||
if(dataType==3){
|
||
$.post(ext.contextPath + '/process/dataVisualFrame/showMenu4Select.do', {
|
||
formId: "subForm",
|
||
hiddenId: hiddenId,
|
||
textId: textId,
|
||
ownId: id,
|
||
menuType: 'proVisual'
|
||
}, function (data) {
|
||
$("#menu4SelectDiv").html(data);
|
||
openModal("menu4SelectModal")
|
||
});
|
||
}
|
||
if(dataType==4){
|
||
$.post(ext.contextPath + '/process/dataVisualCamera/radioListForVisual.do', {
|
||
formId: "subForm",
|
||
hiddenId: hiddenId,
|
||
textId: textId,
|
||
}, function (data) {
|
||
$("#menu4SelectDiv").html(data);
|
||
openModal("cameraSubModal")
|
||
});
|
||
}
|
||
}
|
||
var showCompany4SelectFun = function (hiddenId,textId,id) {
|
||
$.post(ext.contextPath + '/user/showCompany4Select.do', { formId: "subForm", hiddenId: hiddenId, textId: textId }, function (data) {
|
||
$("#company4SelectDiv").html(data);
|
||
openModal("company4SelectModal");
|
||
});
|
||
};
|
||
|
||
function dosaveElement(){
|
||
var icon_width = 36;
|
||
var icon_height = 49;
|
||
var elementLeft = $("#elementLeft").val();
|
||
var elementTop = $("#elementTop").val();
|
||
if(dataType==1){
|
||
icon_width = 36;
|
||
icon_height = 49;
|
||
}else{
|
||
icon_width = 18;
|
||
icon_height = 42;
|
||
}
|
||
$("#subForm #elementLeft").val(elementLeft-icon_width/2);
|
||
$("#subForm #elementTop").val(elementTop-icon_height);
|
||
$("#subForm").bootstrapValidator({
|
||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||
fields: {
|
||
name: {
|
||
validators: {
|
||
notEmpty: {
|
||
message: '名称不能为空'
|
||
}
|
||
}
|
||
},
|
||
}
|
||
});
|
||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||
$.post(ext.contextPath + "/jspConfigure/save.do", $("#subForm").serialize(), function(result) {
|
||
if (result == 1) {
|
||
getImgData();
|
||
}else{
|
||
alert('保存失败');
|
||
}
|
||
},'json');
|
||
}
|
||
}
|
||
function doupdateElement() {
|
||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||
$.post(ext.contextPath + "/jspConfigure/update.do", $("#subForm").serialize(), function(data) {
|
||
if (data == 1){
|
||
getImgData();
|
||
}else if(data == 0){
|
||
alert('保存失败');
|
||
}else{
|
||
alert(data);
|
||
}
|
||
},'json');
|
||
}
|
||
}
|
||
|
||
function dodelElement() {
|
||
swal({
|
||
text: "您确定要删除此记录？",
|
||
dangerMode: true,
|
||
buttons: {
|
||
cancel: {
|
||
text: "取消",
|
||
value: null,
|
||
visible: true,
|
||
className: "btn btn-default btn-sm",
|
||
closeModal: true,
|
||
},
|
||
confirm: {
|
||
text: "确定",
|
||
value: true,
|
||
visible: true,
|
||
className: "btn btn-danger btn-sm",
|
||
closeModal: true
|
||
}
|
||
}
|
||
})
|
||
.then(function(willDelete) {
|
||
if (willDelete) {
|
||
$.post(ext.contextPath + '/jspConfigure/delete.do', $("#subForm").serialize(), function(data) {
|
||
if(data>0){
|
||
getImgData();
|
||
}else{
|
||
alert('删除失败');
|
||
}
|
||
},'json');
|
||
|
||
}
|
||
});
|
||
}
|
||
function addAndRemove4Class(one,two){
|
||
$('.'+one).addClass(two);
|
||
$('.'+one).removeClass(one);
|
||
}
|
||
function getData(){
|
||
var time_input = $('#time_input').val();
|
||
$.post(ext.contextPath + '/smart/getSmartData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
|
||
var arr= JSON.parse(data);
|
||
console.log(arr);
|
||
var left_middle_line_legenddata=[];
|
||
var left_middle_line_seriesdata=[];
|
||
var left_bottom_bar_legenddata=[];
|
||
var left_bottom_bar_seriesdata=[];
|
||
var bar_max =0;
|
||
var bar_min =0;
|
||
var bar_totle =0;
|
||
var center_bottom_line_legenddata=[];
|
||
var center_bottom_line_seriesdata=[];
|
||
var patrol =0;
|
||
var maintenance =0;
|
||
var right_bottom_bar_legenddata=[];
|
||
var right_bottom_bar_seriesdata=[];
|
||
var water_supply_title = "";
|
||
var effluentQuality_title = "";
|
||
var key_indicators = "";
|
||
|
||
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
|
||
for(var i=0;i<arr.rows.length;i++){
|
||
var value =0;
|
||
var numtail=0;
|
||
var dataMax=0;
|
||
var rate = 1;
|
||
if(arr.rows[i].visualCacheConfig!=null
|
||
&& arr.rows[i].visualCacheConfig!=undefined
|
||
&& arr.rows[i].visualCacheConfig!=''){
|
||
var visualCacheConfig = arr.rows[i].visualCacheConfig;
|
||
if(visualCacheConfig.numtail!=null && visualCacheConfig.numtail!=undefined && visualCacheConfig.numtail!=''){
|
||
numtail = visualCacheConfig.numtail;
|
||
}
|
||
}
|
||
if(arr.rows[i].visualCacheData!=null
|
||
&& arr.rows[i].visualCacheData!=undefined
|
||
&& arr.rows[i].visualCacheData!=''){
|
||
var visualCacheData = arr.rows[i].visualCacheData;
|
||
|
||
if(visualCacheData.inivalue!=null && visualCacheData.inivalue!=undefined && visualCacheData.inivalue!=''){
|
||
value = visualCacheData.inivalue;
|
||
}else{
|
||
if(visualCacheData.value!=null && visualCacheData.value!=undefined && visualCacheData.value!=''){
|
||
value = visualCacheData.value;
|
||
}else{
|
||
if(arr.rows[i].mPoint!=null && arr.rows[i].mPoint!=undefined && arr.rows[i].mPoint!=''){
|
||
var mPoint = arr.rows[i].mPoint;
|
||
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
|
||
value = mPoint.parmvalue;
|
||
}
|
||
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
|
||
dataMax = mPoint.alarmmax;
|
||
}
|
||
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
|
||
numtail = mPoint.numtail;
|
||
}
|
||
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
|
||
nowdate = mPoint.measuredt;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if(visualCacheData.numtail!=null && visualCacheData.numtail!=undefined && visualCacheData.numtail!=''){
|
||
numtail = visualCacheData.numtail;
|
||
}
|
||
if(visualCacheData.rate!=null && visualCacheData.rate!=undefined && visualCacheData.rate!=''){
|
||
rate = visualCacheData.rate;
|
||
}
|
||
}else{
|
||
var mPoint = arr.rows[i].mPoint;
|
||
if(mPoint!=null && mPoint!=undefined && mPoint!=''){
|
||
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
|
||
value = mPoint.parmvalue;
|
||
}
|
||
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
|
||
dataMax = mPoint.alarmmax;
|
||
}
|
||
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
|
||
numtail = mPoint.numtail;
|
||
}
|
||
}
|
||
}
|
||
value = parseFloat(value)*rate;
|
||
value = value.toFixed(numtail);
|
||
//value = parseFloat(value).toFixed(numtail);
|
||
if($("."+arr.rows[i].elementCode).length > 0){
|
||
$("."+arr.rows[i].elementCode).html(toThousands(value));
|
||
}
|
||
if($("#"+arr.rows[i].elementCode+"_title").length > 0){
|
||
$("#"+arr.rows[i].elementCode+"_title").attr("data-mpcode",arr.rows[i].visualCacheData.mpcode);
|
||
}
|
||
if(arr.rows[i].elementCode=='effluent_turbidity' ){
|
||
if($(".yesterday_water_supply").length > 0){
|
||
var yes_value = 0;
|
||
if(arr.rows[i].mPointHistory!=null
|
||
&& arr.rows[i].mPointHistory!=undefined
|
||
&& arr.rows[i].mPointHistory!=''){
|
||
var mPointHistory = arr.rows[i].mPointHistory;
|
||
if(mPointHistory.length>2){
|
||
yes_value = mPointHistory[mPointHistory.length-2].parmvalue.toFixed(numtail);
|
||
}else{
|
||
if(mPointHistory.length>1){
|
||
yes_value = mPointHistory[mPointHistory.length-1].parmvalue.toFixed(numtail);
|
||
}else{
|
||
yes_value = mPointHistory[0].parmvalue.toFixed(numtail);
|
||
}
|
||
}
|
||
}else{
|
||
if(arr.rows[i].visualCacheDataList!=null
|
||
&& arr.rows[i].visualCacheDataList!=undefined
|
||
&& arr.rows[i].visualCacheDataList!=''){
|
||
var visualCacheDataList = arr.rows[i].visualCacheDataList;
|
||
if(visualCacheDataList.length>2){
|
||
yes_value = visualCacheDataList[visualCacheDataList.length-2].value.toFixed(numtail);
|
||
}else{
|
||
if(visualCacheDataList.length>1){
|
||
yes_value = visualCacheDataList[visualCacheDataList.length-1].value.toFixed(numtail);
|
||
}else{
|
||
yes_value = visualCacheDataList[0].value.toFixed(numtail);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
$(".yesterday_water_supply").html(toThousands(yes_value));
|
||
}
|
||
}
|
||
//出水浊度\出水PH\出水溶解氧
|
||
if(arr.rows[i].elementCode=='effluent_turbidity'
|
||
|| arr.rows[i].elementCode=='effluent_ph'
|
||
|| arr.rows[i].elementCode=='effluent_dissolved_oxygen'){
|
||
left_middle_line_legenddata.push(arr.rows[i].name);
|
||
if(!selectedAll.some(item=>item.name===arr.rows[i].name)){
|
||
var legenddata = {
|
||
name : arr.rows[i].name,
|
||
flag : selected_RawWaterQuality
|
||
};
|
||
selectedAll.push(legenddata);
|
||
selected_RawWaterQuality = false;
|
||
}
|
||
if(arr.rows[i].visualCacheData!=null
|
||
&& arr.rows[i].visualCacheData!=undefined
|
||
&& arr.rows[i].visualCacheData!=''){
|
||
var visualCacheData = arr.rows[i].visualCacheData;
|
||
if(visualCacheData.mpcode!=null && visualCacheData.mpcode!=''){
|
||
effluentQuality_title += visualCacheData.mpcode+',';
|
||
}
|
||
}
|
||
var dataseries =[];
|
||
if(arr.rows[i].mPointHistory!=null
|
||
&& arr.rows[i].mPointHistory!=undefined
|
||
&& arr.rows[i].mPointHistory!=''){
|
||
var mPointHistory = arr.rows[i].mPointHistory;
|
||
for(var m=0;m<mPointHistory.length;m++){
|
||
var dataserie =[];
|
||
dataserie.push(mPointHistory[m].measuredt);
|
||
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}else{
|
||
if(arr.rows[i].visualCacheDataList!=null
|
||
&& arr.rows[i].visualCacheDataList!=undefined
|
||
&& arr.rows[i].visualCacheDataList!=''){
|
||
var visualCacheDataList = arr.rows[i].visualCacheDataList;
|
||
for(var m=0;m<visualCacheDataList.length;m++){
|
||
var dataserie =[];
|
||
dataserie.push(visualCacheDataList[m].insdt);
|
||
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}
|
||
}
|
||
left_middle_line_seriesdata.push({
|
||
name: arr.rows[i].name,
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: dataseries
|
||
});
|
||
}
|
||
//日供水量\日取水量
|
||
if(arr.rows[i].elementCode=='daily_water_supply'
|
||
|| arr.rows[i].elementCode=='daily_water_intake' ){
|
||
left_bottom_bar_legenddata.push(arr.rows[i].name);
|
||
if(!selectedAll.some(item=>item.name===arr.rows[i].name)){
|
||
var legenddata = {
|
||
name : arr.rows[i].name,
|
||
flag : selected_DailyWaterSupply
|
||
};
|
||
selectedAll.push(legenddata);
|
||
selected_DailyWaterSupply = false;
|
||
}
|
||
if(arr.rows[i].visualCacheData!=null
|
||
&& arr.rows[i].visualCacheData!=undefined
|
||
&& arr.rows[i].visualCacheData!=''){
|
||
var visualCacheData = arr.rows[i].visualCacheData;
|
||
if(visualCacheData.mpcode!=null && visualCacheData.mpcode!=''){
|
||
water_supply_title += visualCacheData.mpcode+',';
|
||
}
|
||
}
|
||
var dataseries =[];
|
||
if(arr.rows[i].mPointHistory!=null
|
||
&& arr.rows[i].mPointHistory!=undefined
|
||
&& arr.rows[i].mPointHistory!=''){
|
||
var mPointHistory = arr.rows[i].mPointHistory;
|
||
for(var m=0;m<mPointHistory.length;m++){
|
||
if(arr.rows[i].elementCode=='daily_water_supply'){
|
||
if(m==0){
|
||
bar_max = mPointHistory[m].parmvalue;
|
||
bar_min = mPointHistory[m].parmvalue;
|
||
}
|
||
if(mPointHistory[m].parmvalue>bar_max){
|
||
bar_max = mPointHistory[m].parmvalue;
|
||
}
|
||
if(mPointHistory[m].parmvalue<bar_min){
|
||
bar_min = mPointHistory[m].parmvalue;
|
||
}
|
||
bar_totle += mPointHistory[m].parmvalue;
|
||
}
|
||
var dataserie =[];
|
||
dataserie.push(mPointHistory[m].measuredt.substr(0,10));
|
||
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}else{
|
||
if(arr.rows[i].visualCacheDataList!=null
|
||
&& arr.rows[i].visualCacheDataList!=undefined
|
||
&& arr.rows[i].visualCacheDataList!=''){
|
||
var visualCacheDataList = arr.rows[i].visualCacheDataList;
|
||
for(var m=0;m<visualCacheDataList.length;m++){
|
||
var dataserie =[];
|
||
dataserie.push(visualCacheDataList[m].insdt.substr(0,10));
|
||
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}
|
||
}
|
||
left_bottom_bar_seriesdata.push({
|
||
name: arr.rows[i].name,
|
||
type: 'bar',
|
||
barMaxWidth: '10%',
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 12,
|
||
},
|
||
},
|
||
data: dataseries
|
||
});
|
||
}
|
||
//单位电耗\单位矾耗\单位氯耗\自耗水率
|
||
if(arr.rows[i].elementCode=='unit_power'
|
||
|| arr.rows[i].elementCode=='unit_alum'
|
||
|| arr.rows[i].elementCode=='unit_chlorine'
|
||
|| arr.rows[i].elementCode=='water_rate'){
|
||
center_bottom_line_legenddata.push(arr.rows[i].name);
|
||
if(arr.rows[i].visualCacheData!=null
|
||
&& arr.rows[i].visualCacheData!=undefined
|
||
&& arr.rows[i].visualCacheData!=''){
|
||
var visualCacheData = arr.rows[i].visualCacheData;
|
||
if(visualCacheData.mpcode!=null && visualCacheData.mpcode!=''){
|
||
key_indicators += visualCacheData.mpcode+',';
|
||
}
|
||
}
|
||
var dataseries =[];
|
||
if(arr.rows[i].mPointHistory!=null
|
||
&& arr.rows[i].mPointHistory!=undefined
|
||
&& arr.rows[i].mPointHistory!=''){
|
||
var mPointHistory = arr.rows[i].mPointHistory;
|
||
for(var m=0;m<mPointHistory.length;m++){
|
||
var dataserie =[];
|
||
dataserie.push(mPointHistory[m].measuredt.substr(0,10));
|
||
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}else{
|
||
if(arr.rows[i].visualCacheDataList!=null
|
||
&& arr.rows[i].visualCacheDataList!=undefined
|
||
&& arr.rows[i].visualCacheDataList!=''){
|
||
var visualCacheDataList = arr.rows[i].visualCacheDataList;
|
||
for(var m=0;m<visualCacheDataList.length;m++){
|
||
var dataserie =[];
|
||
dataserie.push(visualCacheDataList[m].insdt);
|
||
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}
|
||
}
|
||
center_bottom_line_seriesdata.push({
|
||
name: arr.rows[i].name,
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: dataseries
|
||
});
|
||
}
|
||
//巡检完成率
|
||
if(arr.rows[i].elementCode=='patrol_inspection_completion_rate'){
|
||
patrol=value;
|
||
}
|
||
//维修完成率
|
||
if(arr.rows[i].elementCode=='maintenance_completion_rate'){
|
||
maintenance=value;
|
||
}
|
||
|
||
//机械设备日维修次\电气设备日维修次数\自动化设备日维修次数\水质设备日维修次数
|
||
if(arr.rows[i].elementCode=='mechanics_equipment_repair_day'
|
||
|| arr.rows[i].elementCode=='electrical_equipment_repair_day'
|
||
|| arr.rows[i].elementCode=='automation_equipment_repair_day'
|
||
|| arr.rows[i].elementCode=='water_equipment_repair_day' ){
|
||
right_bottom_bar_legenddata.push(arr.rows[i].name);
|
||
var dataseries =[];
|
||
if(arr.rows[i].mPointHistory!=null
|
||
&& arr.rows[i].mPointHistory!=undefined
|
||
&& arr.rows[i].mPointHistory!=''){
|
||
var mPointHistory = arr.rows[i].mPointHistory;
|
||
for(var m=0;m<mPointHistory.length;m++){
|
||
var dataserie =[];
|
||
dataserie.push(mPointHistory[m].measuredt.substr(0,7));
|
||
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}else{
|
||
if(arr.rows[i].visualCacheDataList!=null
|
||
&& arr.rows[i].visualCacheDataList!=undefined
|
||
&& arr.rows[i].visualCacheDataList!=''){
|
||
var visualCacheDataList = arr.rows[i].visualCacheDataList;
|
||
for(var m=0;m<visualCacheDataList.length;m++){
|
||
var dataserie =[];
|
||
dataserie.push(visualCacheDataList[m].insdt.substr(0,7));
|
||
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
||
dataseries.push(dataserie);
|
||
}
|
||
}
|
||
}
|
||
right_bottom_bar_seriesdata.push({
|
||
name: arr.rows[i].name,
|
||
type: 'bar',
|
||
barMaxWidth: '10%',
|
||
stack: '设备',
|
||
data: dataseries
|
||
});
|
||
}
|
||
}
|
||
}
|
||
var selected = {};
|
||
if(selectedAll.length>0){
|
||
for(var s=0;s<selectedAll.length;s++){
|
||
selected[selectedAll[s].name]=selectedAll[s].flag;
|
||
}
|
||
}
|
||
echarts_line('left-middle-line',left_middle_line_legenddata,left_middle_line_seriesdata,selected);
|
||
echarts_bar('left-bottom-bar',bar_max,bar_min,bar_totle,left_bottom_bar_legenddata,left_bottom_bar_seriesdata,selected);
|
||
echarts_line_bottom('center-bottom-line',center_bottom_line_legenddata,center_bottom_line_seriesdata);
|
||
var data = {value:patrol,name:'巡检完成率'};
|
||
doendPie('right-top-pie-1',data);
|
||
data = {value:maintenance,name:'维修完成率'};
|
||
doendPie('right-top-pie-2',data);
|
||
echarts_bar_right('right-bottom-bar',right_bottom_bar_legenddata,right_bottom_bar_seriesdata);
|
||
|
||
if($("#water_supply_title").length > 0){
|
||
$("#water_supply_title").attr("data-mpcode",water_supply_title);
|
||
}
|
||
if($("#key_indicators").length > 0){
|
||
$("#key_indicators").attr("data-mpcode",key_indicators);
|
||
}
|
||
if($("#effluentQuality_title").length > 0){
|
||
$("#effluentQuality_title").attr("data-mpcode",effluentQuality_title);
|
||
}
|
||
});
|
||
getImgData();
|
||
}
|
||
|
||
function getImgData(){
|
||
$('.center-middle').empty();
|
||
$.post(ext.contextPath + '/jspConfigure/getSmartImgData.do', {bizid:bizid,jsp_id:jsp_id} , function(data) {
|
||
var arr = JSON.parse(data);
|
||
console.log(arr);
|
||
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
|
||
var elements = "";
|
||
for(var i=0;i<arr.rows.length;i++){
|
||
var element= arr.rows[i];
|
||
var icon_width = 36;
|
||
var icon_height = 49;
|
||
var heightAlone = 0;
|
||
var widthAlone = 0;
|
||
if(element.windowsHeight != null && element.windowsHeight != undefined && element.windowsHeight != ''){
|
||
heightAlone = height/element.windowsHeight;
|
||
}else{
|
||
heightAlone = heightV;
|
||
}
|
||
if(element.windowsWidth != null && element.windowsWidth != undefined && element.windowsWidth != ''){
|
||
widthAlone = width/element.windowsWidth;
|
||
}else{
|
||
widthAlone = widthV;
|
||
}
|
||
if(element.dataType==1){
|
||
src = ext.contextPath+"/IMG/smart/map_waterworks.png";
|
||
icon_width = 36;
|
||
icon_height = 49;
|
||
}else{
|
||
if(element.dataType==4){
|
||
src = ext.contextPath+"/IMG/smart/camera.png";
|
||
icon_width = 32;
|
||
icon_height = 32;
|
||
}else{
|
||
src = ext.contextPath+"/IMG/smart/map_pump_station.png";
|
||
icon_width = 18;
|
||
icon_height = 42;
|
||
}
|
||
}
|
||
var proDatavisualFrameName= "";
|
||
if(element.dataVisualFrame!=null){
|
||
proDatavisualFrameName=element.dataVisualFrame.name;
|
||
}
|
||
if(element.camera!=null){
|
||
proDatavisualFrameName=element.camera.name;
|
||
}
|
||
var companyname= "";
|
||
if(element.unit!=null){
|
||
companyname=element.unit.sname;
|
||
}
|
||
elements = '<div id="'+element.id+'" '+
|
||
' class="edit-element" title="'+element.name+'" data-id="'+element.id+'" data-name="'+element.name+'" '+
|
||
' data-elementLeft="'+element.elementLeft+'" data-elementTop="'+element.elementTop+'" data-proDatavisualFrameId="'+element.proDatavisualFrameId+'" '+
|
||
' data-proDatavisualFrameName="'+proDatavisualFrameName+'" data-dataType="'+element.dataType+'" '+
|
||
' data-companyid="'+element.companyid+'" data-companyname="'+companyname+'" '+
|
||
' style=" left: '+(element.elementLeft*widthAlone)+'px;top: '+(element.elementTop*heightAlone)+'px;">'+
|
||
' <img src= "'+src+'" style="width: '+icon_width+'px;height: '+icon_height+'px;" draggable="false"/>'+
|
||
' </div>';
|
||
$('.center-middle').append(elements);
|
||
var fun = "drag"; // 函数的名称
|
||
try {
|
||
if($.isFunction(eval(fun))){
|
||
drag(element.id);
|
||
}
|
||
} catch(e) {
|
||
console.log('drag函数不存在!');
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function echarts_line(id,legenddata,seriesdata,selected){
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||
lifeChart.dispose();
|
||
}
|
||
var option = {
|
||
color:color,
|
||
/*<%-- title: {
|
||
text: '{A|出水水质}',
|
||
textStyle: {
|
||
color: fontcolor_black ,
|
||
rich: {
|
||
A: {
|
||
fontSize: 16 ,
|
||
fontWeight: 'bold' ,
|
||
height: 23,
|
||
width: 115,
|
||
align:'center',
|
||
backgroundColor: {
|
||
image: ext.contextPath+'/IMG/smart/title'+img_name+'.png',
|
||
},
|
||
},
|
||
},
|
||
}
|
||
}, --%>*/
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: legenddata,
|
||
/* top:'6%', */
|
||
x:'right',
|
||
textStyle: {
|
||
color: fontcolor_grey ,
|
||
fontSize: 12 ,
|
||
},
|
||
icon:'roundRect',
|
||
selected: selected
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed' ,
|
||
}
|
||
}
|
||
},
|
||
series: seriesdata,
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option,true);
|
||
}
|
||
function echarts_bar(id,max,min,totle,legenddata,seriesdata,selected){
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||
lifeChart.dispose();
|
||
}
|
||
var option = {
|
||
color :[color[3],color[2]],
|
||
/* <%-- title: {
|
||
text: '{A|近十日供取水量}',
|
||
textStyle: {
|
||
color: fontcolor_black ,
|
||
rich: {
|
||
A: {
|
||
fontSize: 16 ,
|
||
fontWeight: 'bold' ,
|
||
height: 24,
|
||
width: 164,
|
||
align:'center',
|
||
backgroundColor: {
|
||
image: ext.contextPath+'/IMG/smart/title_long'+img_name+'.png',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
subtext: ' 最高供水 {A|'+max+'} 最低供水 {A|'+min+'} 总供水 {A|'+totle+'} ',
|
||
subtextStyle: {
|
||
color: fontcolor_grey ,
|
||
fontSize: 12 ,
|
||
rich: {
|
||
A: {
|
||
color: '#69f6f9' ,
|
||
},
|
||
},
|
||
} ,
|
||
}, --%>*/
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: legenddata,//['供水量', '取水量'],
|
||
x:'right',
|
||
textStyle: {
|
||
color: fontcolor_grey ,
|
||
fontSize: 12 ,
|
||
},
|
||
selected: selected
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name:'万立方米',
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed' ,
|
||
}
|
||
}
|
||
},
|
||
series: seriesdata,
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option,true);
|
||
}
|
||
function echarts_line_bottom(id,legenddata,seriesdata){
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||
lifeChart.dispose();
|
||
}
|
||
var option = {
|
||
color:color,
|
||
title: {
|
||
text: '能耗曲线',
|
||
textStyle: {
|
||
color: titleColor ,
|
||
fontSize: 16
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
name:''
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: seriesdata,
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option,true);
|
||
}
|
||
function doendPie(id,data){
|
||
var othVal = 100 - data.value;
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: [color_blue_other],
|
||
title: {
|
||
text: data.value,
|
||
subtext: '%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'30%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: color_blue,
|
||
fontSize: '50'
|
||
},
|
||
subtextStyle: {
|
||
fontWeight: 'normal',
|
||
color: color_blue,
|
||
fontSize: '16',
|
||
verticalAlign :'top'
|
||
},
|
||
},
|
||
legend: {
|
||
data:[data.name],
|
||
left: '16%',
|
||
y: '5%',
|
||
icon:'none',
|
||
textStyle: {
|
||
color: '#a3a9af' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['50%', '60%'],
|
||
center: ['50%', '50%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
startAngle:90, //起始角度
|
||
data: [{
|
||
value: data.value,
|
||
name: data.name,
|
||
itemStyle: {
|
||
normal: {
|
||
color: color_blue,
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal
|
||
}]
|
||
}]
|
||
}
|
||
myChart.clear();
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function echarts_bar_right(id,legenddata,seriesdata){
|
||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||
//有的话就获取已有echarts实例的DOM节点。
|
||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||
lifeChart.dispose();
|
||
}
|
||
var option = {
|
||
color:color,
|
||
title: {
|
||
text: '月度设备维修次数统计',
|
||
textStyle: {
|
||
color: titleColor ,
|
||
fontSize: 16 ,
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: legenddata,//['机械设备', '电气设备', '自动化设备', '水质设备'],
|
||
top:'30',
|
||
x:'right',
|
||
textStyle: {
|
||
color: fontcolor_grey ,
|
||
fontSize: 14 ,
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top:'85',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name:'次',
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed' ,
|
||
}
|
||
}
|
||
},
|
||
series: seriesdata,
|
||
};
|
||
lifeChart = echarts.init(document.getElementById(id));
|
||
lifeChart.setOption(option,true);
|
||
}
|
||
|
||
//添加千分位符合
|
||
function toThousands(num) {
|
||
var nums =num;
|
||
var re=/\d{1,3}(?=(\d{3})+$)/g;
|
||
var n1=0;
|
||
if(nums!=null && nums!='' && nums!=undefined){
|
||
n1=nums.toString().replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
|
||
}
|
||
return n1;
|
||
}
|
||
|
||
$(function () {
|
||
left_top_height = $('.left-top').height();
|
||
left_middle_height = $('.left-middle').height();
|
||
left_bottom_height = $('.left-bottom').height();
|
||
center_top_height = $('.center-top').height();
|
||
center_middle_height = $('.center-middle').height();
|
||
center_bottom_height = $('.center-bottom').height();
|
||
right_top_height = $('.right-top').height();
|
||
right_middle_height = $('.right-middle').height();
|
||
right_bottom_height = $('.right-bottom').height();
|
||
showElement();
|
||
bizid = unitId;
|
||
jsp_id = $('#jsp_id').val();
|
||
$(document).on('click','.center-middle',function(e){
|
||
var fun = "mapClick"; // 函数的名称
|
||
try {
|
||
if($.isFunction(eval(fun))){
|
||
var element = this;
|
||
mapClick(element,e);
|
||
}
|
||
} catch(e) {
|
||
console.log('mapClick函数不存在!');
|
||
}
|
||
});
|
||
$(document).on('click','.new-element',function(event){
|
||
//防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
|
||
event.stopPropagation();
|
||
});
|
||
$(document).on('click','.edit-element',function(event){
|
||
//防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
|
||
event.stopPropagation();
|
||
var element = this;
|
||
editElement(element,event);
|
||
});
|
||
$(document).on('click','.btn-box-tool',function(event){
|
||
//防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
|
||
event.stopPropagation();
|
||
var widget = $(this).data("widget");
|
||
if(widget=='remove'){
|
||
$(this).parent().parent().parent().remove();
|
||
}
|
||
});
|
||
|
||
$('#switch').bootstrapSwitch({ //初始化按钮
|
||
onText:" ",
|
||
offText:" ",
|
||
onColor:"primary",
|
||
offColor:"default",
|
||
size:"mini",
|
||
handleWidth:10,
|
||
labelWidth:20,
|
||
onSwitchChange:function(event,state){
|
||
if(state==true){
|
||
console.log("深色");
|
||
addAndRemove4Class('content-wrapper-bg-grey','content-wrapper-bg-darkblue');
|
||
addAndRemove4Class('content-wrapper-bg-white','content-wrapper-bg-transparent');
|
||
addAndRemove4Class('font-color-lightBlack','font-color-white');
|
||
addAndRemove4Class('font-color-lightBlue','font-color-blue');
|
||
addAndRemove4Class('font-color-smalt','font-color-dark-blue');
|
||
addAndRemove4Class('font-color-lightWhite','font-color-black');
|
||
addAndRemove4Class('font-color-light-blue','font-color-dark-white');
|
||
addAndRemove4Class('bgcolor-white','bgcolor-blue');
|
||
addAndRemove4Class('right-title-blue','right-title');
|
||
fontcolor_black = '#0d2336';
|
||
color_blue = '#36FFF9';
|
||
color_blue_other = '#1D4F6D';
|
||
img_name = '';
|
||
titleColor = '#ffffff';
|
||
$('.switch-title').html("深色模式");
|
||
}else{
|
||
console.log("浅色");
|
||
addAndRemove4Class('content-wrapper-bg-darkblue','content-wrapper-bg-grey');
|
||
addAndRemove4Class('content-wrapper-bg-transparent','content-wrapper-bg-white');
|
||
addAndRemove4Class('font-color-white','font-color-lightBlack');
|
||
addAndRemove4Class('font-color-black','font-color-lightWhite');
|
||
addAndRemove4Class('font-color-blue','font-color-lightBlue');
|
||
addAndRemove4Class('font-color-dark-blue','font-color-smalt');
|
||
addAndRemove4Class('font-color-dark-white','font-color-light-blue');
|
||
addAndRemove4Class('bgcolor-blue','bgcolor-white');
|
||
addAndRemove4Class('right-title','right-title-blue');
|
||
fontcolor_black = '#fff';
|
||
color_blue = '#1790FF';
|
||
color_blue_other = '#E9E9E9';
|
||
titleColor = '#0d2336';
|
||
img_name = '_blue';
|
||
$('.switch-title').html("浅色模式");
|
||
}
|
||
getData();
|
||
}
|
||
});
|
||
echarts_line('left-middle-line',[],[]);
|
||
echarts_bar('left-bottom-bar',0,0,0,[],[]);
|
||
echarts_line_bottom('center-bottom-line',[],[]);
|
||
var data = {value:0,name:'巡检完成率'};
|
||
doendPie('right-top-pie-1',data);
|
||
data = {value:0,name:'维修完成率'};
|
||
doendPie('right-top-pie-2',data);
|
||
echarts_bar_right('right-bottom-bar',[],[]);
|
||
getData();
|
||
//setInterval("getData('"+bizid+"')",600000);
|
||
|
||
$(window).resize(function() {
|
||
showElement();
|
||
getData();
|
||
});
|
||
});
|
||
|
||
function showElement(){
|
||
height = $(window).height();
|
||
width = $(window).width();
|
||
if(height<(global_height*0.1)){
|
||
height = global_height;
|
||
}
|
||
if(width<(global_width*0.1)){
|
||
width = global_width;
|
||
}
|
||
heightV = height/1080;
|
||
widthV = width/1690;
|
||
var proportion = height/1080;
|
||
$('.left-top').height(left_top_height*proportion);
|
||
$('.left-middle').height(left_middle_height*proportion);
|
||
$('.left-bottom').height(left_bottom_height*proportion);
|
||
$('.left-middle-line').height($('.left-middle').height()-60);
|
||
$('.left-bottom-bar').height($('.left-bottom').height()-60);
|
||
|
||
$('.center-top').height(center_top_height*proportion);
|
||
$('.center-middle').height(center_middle_height*proportion);
|
||
$('.center-bottom').height(center_bottom_height*proportion);
|
||
$('.center-bottom-line').height($('.center-bottom').height()-30);
|
||
|
||
$('.right-top').height(right_top_height*proportion);
|
||
$('.right-top-pie').height($('.right-top').height()*0.5);
|
||
$('.right-middle').height(right_middle_height*proportion);
|
||
$('.right-bottom').height(right_bottom_height*proportion);
|
||
$('.right-bottom-bar').height($('.right-bottom').height()-10);
|
||
}
|
||
function showLine(ele) {
|
||
var mpcode = $(ele).attr("data-mpcode");
|
||
$.post(ext.contextPath + '/data/showOnlyLine.do', {mpcode: mpcode, unitId: unitId}, function (data2) {
|
||
$("#subDiv").html(data2);
|
||
openModal('curveModal');
|
||
});
|
||
} |