Browse Source

提交液压表,仪表盘,液位图修改

master
谕仙 2 years ago
parent
commit
a89c56904c
  1. 1688
      lpro/src/main/webapp/lib/echarts/echarts-liquidfill.js
  2. 1
      lpro/src/main/webapp/lib/echarts/echarts-liquidfill.js.map
  3. 2
      lpro/src/main/webapp/lib/echarts/echarts-liquidfill.min.js
  4. 1
      lpro/src/main/webapp/lib/echarts/echarts-liquidfill.min.js.map
  5. 25
      lpro/src/main/webapp/lib/echarts/echarts.common.min.js
  6. 93867
      lpro/src/main/webapp/lib/echarts/echarts.js
  7. 93867
      lpro/src/main/webapp/lib/echarts/echarts.js.map
  8. 22
      lpro/src/main/webapp/lib/echarts/echarts.min.js
  9. 12
      lpro/src/main/webapp/page/visual/image/仪表盘.svg
  10. 1
      lpro/src/main/webapp/page/visual/image/压力表.svg
  11. BIN
      lpro/src/main/webapp/page/visual/image/压力表3.png
  12. 146
      lpro/src/main/webapp/page/visual/index.html
  13. 252
      lpro/src/main/webapp/page/visual/js/cfg.js
  14. 34
      lpro/src/main/webapp/page/visual/js/show.js
  15. 7
      lpro/src/main/webapp/page/visual/show.html

1688
lpro/src/main/webapp/lib/echarts/echarts-liquidfill.js

File diff suppressed because it is too large

1
lpro/src/main/webapp/lib/echarts/echarts-liquidfill.js.map

File diff suppressed because one or more lines are too long

2
lpro/src/main/webapp/lib/echarts/echarts-liquidfill.min.js

File diff suppressed because one or more lines are too long

1
lpro/src/main/webapp/lib/echarts/echarts-liquidfill.min.js.map

File diff suppressed because one or more lines are too long

25
lpro/src/main/webapp/lib/echarts/echarts.common.min.js

File diff suppressed because one or more lines are too long

93867
lpro/src/main/webapp/lib/echarts/echarts.js

File diff suppressed because it is too large

93867
lpro/src/main/webapp/lib/echarts/echarts.js.map

File diff suppressed because it is too large

22
lpro/src/main/webapp/lib/echarts/echarts.min.js

File diff suppressed because one or more lines are too long

12
lpro/src/main/webapp/page/visual/image/仪表盘.svg

@ -0,0 +1,12 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1664419174289"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1618" xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path d="M763.733333 554.666667H725.333333v-85.333334h38.4c-17.066667-106.666667-102.4-192-209.066666-209.066666V298.666667h-85.333334v-38.4c-106.666667 17.066667-192 102.4-209.066666 209.066666H298.666667v85.333334h-38.4c17.066667 106.666667 102.4 192 209.066666 209.066666V725.333333h85.333334v38.4c106.666667-17.066667 192-102.4 209.066666-209.066666zM512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m132.266667-477.866666l-106.666667 196.266666-89.6-89.6 196.266667-106.666666z m-324.266667-25.6l29.866667-29.866667 29.866666 29.866667-29.866666 29.866666-29.866667-29.866666z m320 320l29.866667-29.866667 29.866666 29.866667-29.866666 29.866666-29.866667-29.866666z m29.866667-349.866667l29.866666 29.866667-29.866666 29.866666-29.866667-29.866666 29.866667-29.866667zM349.866667 640l29.866666 29.866667-29.866666 29.866666-29.866667-29.866666 29.866667-29.866667z" fill="#444444" p-id="1619">
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

1
lpro/src/main/webapp/page/visual/image/压力表.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1664433969761" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2696" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M395.65 880.72c-93.97 0-170.43-76.46-170.43-170.44V681.4c-14.7-6.45-25.08-21.96-25.08-40.04v-81.23c0-8.92 2.53-17.22 6.85-24.1-75.4-29.35-127.83-102.78-127.83-186.91 0-110.59 89.97-200.57 200.56-200.57s200.56 89.97 200.56 200.57c0 45.36-14.98 87.38-40.5 121.12h58.92v38.79h2.33v-0.86c0-24.14 11.06-43.54 27.22-50.35v-34.88c0-93.98 76.46-170.44 170.44-170.44H764c93.98 0 170.44 76.46 170.44 170.44v102.5H826.11v-102.5c0-34.25-27.87-62.12-62.12-62.12h-65.31c-34.25 0-62.12 27.87-62.12 62.12v36.64c14.19 8.02 23.64 26.28 23.64 48.59v123.82c0 22.32-9.44 40.57-23.64 48.59v29.7c0 93.98-76.46 170.44-170.44 170.44h-70.47z m-62.11-170.44c0 34.25 27.87 62.12 62.12 62.12l70.48 0.01c34.24 0 62.1-27.87 62.1-62.12v-27.94c-16.16-6.82-27.22-26.2-27.22-50.35v-1.61h-2.33v41.5H412.7l9.85-66.35h-16.43V536.6h16.14l-5.7-40.6a199.439 199.439 0 0 1-64.04 40.13c4.29 6.87 6.79 15.12 6.79 24v81.23c0 18.36-10.71 34.08-25.77 40.34v28.58z" fill="#FFFFFF" p-id="2697"></path><path d="M763.99 277.12H698.67c-80.4 0-145.82 65.41-145.82 145.82v56.87h-11.59c-8.63 0-15.63 12.7-15.63 28.36v25.48h-16.47v27.57h-35.1v-66.36h-32.83l9.36 66.36h-19.86v19.69h20.35l-9.85 66.35h32.83v-66.35h35.1v24.85h16.47v26.23c0 15.66 7 28.36 15.63 28.36h11.59v49.94c0 47.9-38.83 86.73-86.74 86.73h-10.76v-0.01h-59.72c-47.91 0-86.74-38.84-86.74-86.74v-50.31h10.14c8.63 0 15.63-8.33 15.63-18.61v-81.23c0-10.28-7-18.61-15.63-18.61h-20.59v-17.46c88.35-9.36 157.19-84.11 157.19-174.94 0-97.17-78.77-175.95-175.94-175.95s-175.94 78.78-175.94 175.95c0 89.73 67.19 163.71 153.99 174.53v17.87h-17.39c-8.63 0-15.63 8.33-15.63 18.61v81.23c0 10.28 7 18.61 15.63 18.61h9.46v50.31c0 80.4 65.41 145.82 145.82 145.82h10.76v0.01h59.72c80.41 0 145.82-65.42 145.82-145.82v-49.94h8.01c8.63 0 15.63-12.7 15.63-28.36V508.17c0-15.66-7-28.36-15.63-28.36h-8.01v-56.87c0-47.9 38.84-86.74 86.73-86.74H763.98c47.9 0 86.73 38.84 86.73 86.74v77.88h59.08v-77.88c0.02-80.41-65.39-145.82-145.8-145.82z" fill="#30495E" p-id="2698"></path><path d="M128.41 349.12a151.32 151.33 0 1 0 302.64 0 151.32 151.33 0 1 0-302.64 0Z" fill="#FFFFFF" p-id="2699"></path><path d="M266.31 220.22h21.59v42.84h-21.59zM331.852 279.102l30.297-30.288 15.264 15.269-30.297 30.287zM366.87 336.79h42.84v21.59h-42.84zM335.57 417.63l15.27-15.264 30.287 30.297-15.268 15.264zM271.56 437.36h21.59v42.84h-21.59zM212.33 406.06l15.26 15.27-30.29 30.29-15.27-15.27zM149.74 342.04h42.84v21.59h-42.84zM178.32 267.786l15.266-15.266 30.293 30.292-15.267 15.266z" fill="#556573" p-id="2700"></path><path d="M341.7 269.77l-63.37 56.13c-0.93-0.1-1.87-0.15-2.83-0.15-14.96 0-27.08 12.13-27.08 27.09 0 14.96 12.13 27.09 27.08 27.09 14.96 0 27.09-12.12 27.09-27.09 0-4.22-0.99-8.19-2.71-11.75l41.82-71.32z" fill="#30495E" p-id="2701"></path></svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
lpro/src/main/webapp/page/visual/image/压力表3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

146
lpro/src/main/webapp/page/visual/index.html

@ -34,10 +34,10 @@
<!-- 视频播放 -->
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<script type="text/javascript" src="../../lib/webUploader/webuploader.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.min.js"></script>
<script type="text/javascript" src="js/cfg.js?x=1"></script>
<script type="text/javascript" src="../../lib/webUploader/webuploader.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript" src="js/cfg.js"></script>
<link rel="stylesheet" href="css/cfg.css" />
</head>
<body>
@ -210,7 +210,7 @@
</div>
</div>
<div class="ele-content">
<div class="canvas videoNode" nid="4" >
<div class="canvas videoNode" nid="4" >
<div class="video_content">
<video class="node_video" poster="" controls="" playsinline="" webkit-playsinline="" autoplay="">
<source src="" type="rtmp/flv">
@ -374,21 +374,38 @@
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div class="intro-ico" style="width: 70px;height: 40px;">
<svg t="1664332866723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2797" style="width: 36px;height: 37px;">
<path d="M763.733333 554.666667H725.333333v-85.333334h38.4c-17.066667-106.666667-102.4-192-209.066666-209.066666V298.666667h-85.333334v-38.4c-106.666667 17.066667-192 102.4-209.066666 209.066666H298.666667v85.333334h-38.4c17.066667 106.666667 102.4 192 209.066666 209.066666V725.333333h85.333334v38.4c106.666667-17.066667 192-102.4 209.066666-209.066666zM512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m132.266667-477.866666l-106.666667 196.266666-89.6-89.6 196.266667-106.666666z m-324.266667-25.6l29.866667-29.866667 29.866666 29.866667-29.866666 29.866666-29.866667-29.866666z m320 320l29.866667-29.866667 29.866666 29.866667-29.866666 29.866666-29.866667-29.866666z m29.866667-349.866667l29.866666 29.866667-29.866666 29.866666-29.866667-29.866666 29.866667-29.866667zM349.866667 640l29.866666 29.866667-29.866666 29.866666-29.866667-29.866666 29.866667-29.866667z" fill="#444444" p-id="2798"></path>
</svg>
<!-- <svg t="1664332866723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2797" style="width: 36px;height: 37px;">-->
<!-- <path d="M763.733333 554.666667H725.333333v-85.333334h38.4c-17.066667-106.666667-102.4-192-209.066666-209.066666V298.666667h-85.333334v-38.4c-106.666667 17.066667-192 102.4-209.066666 209.066666H298.666667v85.333334h-38.4c17.066667 106.666667 102.4 192 209.066666 209.066666V725.333333h85.333334v38.4c106.666667-17.066667 192-102.4 209.066666-209.066666zM512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m132.266667-477.866666l-106.666667 196.266666-89.6-89.6 196.266667-106.666666z m-324.266667-25.6l29.866667-29.866667 29.866666 29.866667-29.866666 29.866666-29.866667-29.866666z m320 320l29.866667-29.866667 29.866666 29.866667-29.866666 29.866666-29.866667-29.866666z m29.866667-349.866667l29.866666 29.866667-29.866666 29.866666-29.866667-29.866666 29.866667-29.866667zM349.866667 640l29.866666 29.866667-29.866666 29.866666-29.866667-29.866666 29.866667-29.866667z" fill="#444444" p-id="2798"></path>-->
<!-- </svg>-->
<img src="./image/仪表盘.svg" style="width: 36px;height: 37px;"/>
</div>
<div class="intro-txt">
仪表盘
</div>
</div>
<div class="ele-content">
<div class="canvas pipeLineNode" nid="5" cid="3" >
<div class="canvas pipeLineNode" nid="5" cid="5" >
<div class="chartStyle"></div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div class="intro-ico" style="width: 70px;height: 40px;">
<img src="./image/压力表.svg" style="width: 36px;height: 37px;"/>
</div>
<div class="intro-txt">
压力表
</div>
</div>
<div class="ele-content">
<div class="canvas pipeLineNode" nid="5" cid="6" >
<div class="chartStyle"></div>
</div>
</div>
</div>
</div>
<!-- 图库 -->
<div class="element-container imglibrary self-upload" v-show="tabmode==2">
<el-collapse v-model="activeNameImgKun" accordion >
@ -961,37 +978,37 @@
</div>
<!-- 仪表盘属性 -->
<!-- 仪表盘结束与开始角度 -->
<div v-show="editType == 5 && cid == 3 ">
<div class="tool-title " style="padding: 10px;">仪表盘形状</div>
<div style="padding-left: 10px;">
<el-slider
v-model="piRect"
range
show-stops
:max="360"
:min="-360"
style="width:75%;"
@change="changePiRect"
>
</el-slider>
</div>
</div>
<!-- <div v-show="editType == 5 && cid == 5 ">-->
<!-- <div class="tool-title " style="padding: 10px;">仪表盘形状</div>-->
<!-- <div style="padding-left: 10px;">-->
<!-- <el-slider-->
<!-- v-model="piRect"-->
<!-- range-->
<!-- show-stops-->
<!-- :max="360"-->
<!-- :min="-360"-->
<!-- style="width:75%;"-->
<!-- @change="changePiRect"-->
<!-- >-->
<!-- </el-slider>-->
<!-- </div>-->
<!-- </div>-->
<!-- 仪表盘刻度最大值 -->
<div v-show="editType == 5 && cid == 3 ">
<div v-show="editType == 5 && (cid == 5||cid==6) ">
<div class="tool-title " style="padding: 10px;">仪表盘刻度最大值</div>
<div style="padding-left: 10px;">
<input class="el-input__inner" v-model="pimax" placeholder="刻度最大值" style="width:75%;" @blur="changePiMax">
</div>
</div>
<!-- 仪表盘刻度分段 -->
<div v-show="editType == 5 && cid == 3 ">
<div v-show="editType == 5 && (cid == 5||cid==6) ">
<div class="tool-title " style="padding: 10px;">仪表盘刻度分段数</div>
<div style="padding-left: 10px;">
<input class="el-input__inner" v-model="splitNumber" placeholder="刻度最大值" style="width:75%;" @blur="changeSplitNumber">
</div>
</div>
<!-- 仪表盘刻度单位 -->
<div v-show="editType == 5 && cid == 3 ">
<div v-show="editType == 5 && (cid == 5||cid==6) ">
<div class="tool-title " style="padding: 10px;">刻度单位</div>
<div style="padding-left: 10px;">
<input class="el-input__inner" v-model="piCompany" placeholder="刻度最大值" style="width:75%;" @blur="changePiCompany">
@ -999,6 +1016,32 @@
</div>
</div>
<!-- 折线图,柱状图,饼状图切换 -->
<div class="functionDetails" v-show="nid==5 && cid <= 4 ">
<span>
图表设置
</span>
</div>
<div class="form-group sensorSelect padding" v-show="nid==5 && cid<=3 ">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">图表类型</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<!--
<select class="el-input__inner" v-model="cid" @change="changeChartData">
<option value="">请选择</option>
<option value="1">折线图</option>
<option value="2">柱形图</option>
<option value="3">仪表盘</option>
</select>
-->
<el-select v-model="cid" placeholder="请选择类型" @change="changeChartData" >
<el-option :value="1" label="折线图"></el-option>
<el-option :value="2" label="柱形图"></el-option>
<el-option :value="3" label="饼状图"></el-option>
</el-select>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="数据绑定" name="second">
<div class="nodeConfig" v-show="editType==0|| editType ==1 || editType==4 ||editType==5
@ -1065,32 +1108,9 @@
</div>
</div>
<div class="functionDetails" v-show="nid==5 && cid != 4 ">
<span>
图表设置
</span>
</div>
<div class="form-group sensorSelect padding" v-show="nid==5 && cid != 4 ">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">图表类型</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<!--
<select class="el-input__inner" v-model="cid" @change="changeChartData">
<option value="">请选择</option>
<option value="1">折线图</option>
<option value="2">柱形图</option>
<option value="3">仪表盘</option>
</select>
-->
<el-select v-model="cid" placeholder="请选择类型" @change="changeChartData" >
<el-option :value="1" label="折线图"></el-option>
<el-option :value="2" label="柱形图"></el-option>
<el-option :value="3" label="仪表盘"></el-option>
</el-select>
</div>
</div>
</div>
<div class="form-group padding" v-show="nid==5 && cid == 3 ">
<div class="el-form-item">
@ -1949,16 +1969,30 @@
},
// 修改仪表盘刻度最大值
changePiMax(){
changeChartOption1("max",this.pimax);
updateChartsOption("max",this.pimax);
},
// 修改仪表盘刻度分段
changeSplitNumber(){
changeChartOption1("splitNumber",this.splitNumber);
updateChartsOption("splitnumber",this.splitNumber);
},
// 修改仪表盘刻度单位
changePiCompany(){
var formatter={axisLabel:{formatter:"{value}"+this.piCompany}};
changeChartOption(formatter);
var formatter=null;
var cl = cfg.current_edit_obj ;
var cid=cl.attr('cid');
if(cid=='5'){
formatter="{value}"+this.piCompany;
}else{
formatter= (value)=>{
if (value === 0) {
return '';
}
console.log(app);
return value + this.piCompany;
}
}
updateChartsOption("axisLabel.formatter",formatter);
cl.attr("picompany",this.piCompany);
}
},created(){

252
lpro/src/main/webapp/page/visual/js/cfg.js

@ -17,9 +17,9 @@
* cid:
* 1 折线图
* 2 柱形图
* 3 仪表盘
* 3 饼状图
* 4 液位图
* 5
* 5 仪表盘
* nid=6 地图
* nid=7 临时组合框
* nid=8 状态
@ -94,7 +94,6 @@ var cfg = {
return deg>=360?0:deg;
},
//
elementDragCopyInfo :function(selector){
$(selector).droppable({
activeClass: "ui-state-default",
@ -143,8 +142,14 @@ var cfg = {
h = "180px";
break;
case "5"://图表
w = "400px";
h = "200px";
if(cid==6){
w = "345px";
h = "345px";
}else{
w = "400px";
h = "200px";
}
break;
case "6"://地图
w = "320px";
@ -344,15 +349,20 @@ var cfg = {
$(".text_toolbar_item[tag='"+id+"']").css("display","flex");
break;
case '5':
app.chartMax = obj.attr("max") ;
// 增加切换复原属性 边框和形状
app.columnVal = obj.attr("border") ;
app.shape = obj.attr("shape") ;
app.isDisableAnimation = obj.attr("enableAnimation")==="true"?false:true;
if(app.cid=="4"){
app.propertyModuleName="液位图设置";
}else if(app.cid=="3"){
app.propertyModuleName="仪表盘设置";
app.chartMax = obj.attr("max") ;
// 增加切换复原属性 边框和形状
app.columnVal = obj.attr("border") ;
app.shape = obj.attr("shape") ;
app.isDisableAnimation = obj.attr("enableAnimation")==="true"?false:true;
}else if(app.cid=="5"||app.cid==6){
app.propertyModuleName=app.cid==5?"仪表盘设置":"压力表设置";
app.pimax = obj.attr("pimax") ;
// 增加切换复原属性 边框和形状
app.piCompany = obj.attr("picompany") ;
app.splitNumber = obj.attr('splitnumber');
}
break ;
@ -719,15 +729,19 @@ function initTemplateCharts(obj){
//如果是液位图则不使用默认折线图
var cid = obj.attr("cid");
cfg.current_edit_obj = obj;
// 液位图
if(cid==4){
initSensorLiquidChart();
return;
} else if(cid==3){
} else if(cid==5){
// 仪表盘
initSensorDashChart();
return;
}else if(cid==6){
// 压力表
initSensorPiezometerchart();
return;
}
//默认折线图
var chart = obj.find(".chartStyle");
@ -828,7 +842,8 @@ function initSensorDashChart(){
var current_edit_obj = cfg.current_edit_obj;
var chart = getEchartObj();
option = {
series:[{
series:[
{
name: "name",
type: 'gauge',
radius : "98%",
@ -853,11 +868,94 @@ function initSensorDashChart(){
show: true,
width: 18
},
}
axisLabel:{
formatter:'{value}'
}
}
]
} ;
setChartOption(chart,option) ;
app.pimax = current_edit_obj.attr("pimax",100) ;
current_edit_obj.attr("picompany",'') ;
current_edit_obj.attr('splitnumber',10) ;
}
//初始化压力表
function initSensorPiezometerchart(){
var current_edit_obj = cfg.current_edit_obj;
var chart = getEchartObj();
option = {
series: [
{
name: 'hour',
type: 'gauge',
radius : "100%",
startAngle: 90,
endAngle: -270,
min: 0,
max: 100,
splitNumber: 10,
clockwise: true,
axisLine: {
lineStyle: {
width: 15,
color: [[1, 'rgba(0,0,0,0.7)']],
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 3
}
},
splitLine: {
lineStyle: {
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 3,
shadowOffsetX: 1,
shadowOffsetY: 2
}
},
axisLabel: {
fontSize: 24,
distance: 25,
formatter: function (value) {
if (value === 0) {
return '';
}
return value + '';
}
},
pointer: {
show:true,
icon: 'image://image/压力表3.png',
width: 24,
offsetCenter: [0, '8%'],
length: '55%',
itemStyle: {
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show: false
},
title: {
offsetCenter: [0, '30%'],
backgroundColor: '#FFFFFF'
},
data: [
{
value: 0
}
]
},
]
} ;
chart.setOption(option,true);
current_edit_obj.children(".chartStyle").attr("option",JSON.stringify(option));
current_edit_obj.attr("pimax",100) ;
current_edit_obj.attr("picompany",'') ;
current_edit_obj.attr('splitnumber',10) ;
}
//初始化传感器液位图
function initSensorLiquidChart(){
@ -931,6 +1029,7 @@ function initSensorLiquidChart(){
// });
// },2000)
ableLiquidFillAnimation(nodeId,chart);
}
// 跟具节点id存放定时id
var intervalIdBynodeId=new Map();
@ -960,8 +1059,9 @@ function disableLiquidFillAnimation(nodeId){
current_edit_obj.attr('enableAnimation',false);
clearInterval(intervalId);
}
var optionByNid5cid=new Map();
// 更新Charts属性
function updateChartsOption(propertyName,value){
function updateChartsOption(propertyName,value,funcname,func){
// 当前地图容器
var current_edit_obj = cfg.current_edit_obj;
// let max=current_edit_obj.attr("max");
@ -974,35 +1074,105 @@ function updateChartsOption(propertyName,value){
// 获取地图
var chart = getEchartObj();
if(propertyName){
// 更新属性
option.series[0][propertyName]=value
analysisProp(option,propertyName,value);
}
// 写入属性
optionNode.setAttribute("option",JSON.stringify(option));
// 设置lable显示格式
// option.series[0].label.formatter=function(param){
// return param.seriesName + '\n'
// + param.name + '\n'
// + max +'单位/'+ param.value*max +'单位('+param.value*100+'%)';
// };
// 更新地图
chart.setOption(option);
}
function analysisProp(option,propName,value){
if(propName){
const propertys=propName.split('.');
const pLen=propertys.length;
let data=option.series[0];
let finally_obj=null;
for (let i=0;i<pLen;i++){
const propertyName=propertys[i];
if(i==pLen-1){
finally_obj[propertyName]=value;
break;
}
if(i==0){
finally_obj=data[propertyName];
}else{
finally_obj=finally_obj[propertyName];
}
}
}
}
function objectToString(obj){
let typeStr=Object.prototype.toString.call(obj);
if(typeStr!="[object Object]"&&typeStr!="[object Array]"){
if(typeStr=="[object String]"){
return "\""+obj.toString()+"\"";
}else if(typeStr=="[object Function]"){
return obj.toString().replaceAll(/\n|\t/g,"");
}else{
return obj.toString();
}
}else if(typeStr=="[object Object]"){
let keys=Object.keys(obj);
let keyLen=keys.length;
let finallyStr="{";
for (let i=0;i<keyLen;i++){
let propertyName=keys[i];
let propertyValue=obj[propertyName];
typeStr=Object.prototype.toString.call(propertyValue);
if(typeStr=="[object Object]"){
let objStr=objectToString(propertyValue);
finallyStr+=(propertyName+":"+objStr);
}else if(typeStr=="[object Array]"){
finallyStr+=propertyName+":";
finallyStr+=objectToString(propertyValue);
}else{
finallyStr+=(propertyName+":"+objectToString(propertyValue)+"");
}
if(i!=keyLen-1){
finallyStr+=",";
}
}
return finallyStr+="}";
}else if(typeStr=="[object Array]"){
let finallyStr="[";
let c=0;
let cMax=obj.length-1;
for (const one of obj) {
finallyStr+=objectToString(one);
if(c!=cMax){
finallyStr+=",";
}
c++;
}
return finallyStr+="]";
}
}
function stringToObject(str){
if(str){
}
}
// 修改echart 第一个series属性;示例:
// args: property max
// value 1000
function changeChartOption1(property,value){
var chart = getEchartObj();
option.series[0][property]=value;
chart.setOption(option);
var newOp={...option,series:[...option.series]};
newOp.series[0][property]=value;
chart.setOption(newOp);
}
// 修改echart 第一个series单个/多个属性;示例:
// args: {startAngle:-45,endAngle:225}
function changeChartOption(obj){
var chart = getEchartObj();
var op=option.series[0];
option.series[0]={...op,...obj};
chart.setOption(option);
var newOp={...option,series:[...option.series]};
newOp.series[0]={...newOp.series[0],...obj};
chart.setOption(newOp);
}
//管道图
function initSensorPipelineChart(type){
@ -1302,7 +1472,7 @@ function resetNodeData(id,type){
initSensorLineChart();
} else if(cid == "2"){ //柱形图
initSensorBarChart();
} else if(cid == "3"){ //仪表盘
} else if(cid == "5"){ //仪表盘
initSensorDashChart();
} else if(cid == "4"){ //液位图
// 液位图绑定数据 不进行初始化数据
@ -1343,13 +1513,27 @@ function changeChartSize(obj){
}
//第一次进入的时候重新初始化chart对象 取标签中的option属性重新初始化
function reinitChartObj(){
var chartMap = app.chartMap;
$(".chartStyle").each(function(){
var id = $(this).parent().attr("id");
var parentEl= $(this).parent();
var id = parentEl.attr("id");
var nid = parentEl.attr("nid");
var cid = parentEl.attr("cid");
if(id!=null){
var json = $(this).attr("option");
var option=JSON.parse(json);
if(nid=='5'&&cid=='6'){
var picompany=parentEl.attr('picompany');
if(picompany){
option.series[0].axisLabel.formatter=function (value){
if (value === 0) {
return '';
}
return value + picompany;
}
}
}
var myChart = echarts.init($(this)[0]);
myChart.setOption(JSON.parse(json),true);
myChart.setOption(option,true);
app.chartMap[id] = myChart;
}
})

34
lpro/src/main/webapp/page/visual/js/show.js

@ -131,12 +131,12 @@ function initMap(){
}
/**
* 初始化实时数据 定时
* 初始化实时数据
*/
function initBaseData(){
// sensor 动态数据
initSensorData();
//定时获取 传感器动态数据 Lxc 30秒1次
setInterval( function(){
initSensorData();
}, 30* 1000);
@ -321,14 +321,15 @@ function reinitChartObj(){
$(".chartStyle").each(function(){
var id = $(this).parent().attr("id");
var cid = $(this).parent().attr("cid");
if(cid == 4){
var nid=$(this).parent().attr("nid");
if(cid == '4' && nid=='5'){ // 液位图
var json = $(this).attr("option");
var myChart = echarts.init($(this)[0]);
var option = JSON.parse(json) ;
option.series[0].data = [{name:'sensor',value:0}];
myChart.setOption(option);
app.chartMap[id] = myChart;
}else if(cid == 10){
}else if(cid == '10'&& nid =='10'){ // 管道图
var json = $(this).attr("option");
var myChart = echarts.init($(this)[0]);
var option = JSON.parse(json) ;
@ -336,6 +337,22 @@ function reinitChartObj(){
myChart.setOption(option);
app.chartMap[id] = myChart;
}else if(cid == '6'&& nid =='5'){ // 液压图
var json = $(this).attr("option");
var piCompany = $(this).parent().attr("picompany");
var myChart = echarts.init($(this)[0]);
var option = JSON.parse(json) ;
if(piCompany!=null){
option.series[0].axisLabel.formatter=function (value){
if (value === 0) {
return '';
}
return value + piCompany;
}
}
myChart.setOption(option);
app.chartMap[id] = myChart;
}else if(id != null){
var json = $(this).attr("option");
var myChart = echarts.init($(this)[0]);
@ -359,11 +376,12 @@ function refleshSensorList(){
var id = $(this).parent().attr("id");
var sensor_id = $(this).parent().attr("sensor_id");
var cid = $(this).parent().attr("cid") ;
var nid = $(this).parent().attr("nid") ;
var max = $(this).parent().attr("max") ;
var that = this ;
if(id != null && sensor_id != null ){
if(cid == 3){
if(nid=='5'&&(cid == '5'||cid=='6')){
// 仪表盘
getAjax(baseurl+'/service/sensor?id='+sensor_id,function(res){
if( isOK(res) ){
@ -374,18 +392,18 @@ function refleshSensorList(){
});
}
});
}else if(cid == 4){
}else if(nid=='5'&&cid == '4'){
// 液位图
getAjax(baseurl+'/service/sensor?id='+sensor_id,function(res){
if( isOK(res) ){
app.chartMap[id].setOption({
series: [{
data: [ {name:'sensor',value:res.data.sdata/max } ]
data: [ {name:res.data.name ,value:res.data.sdata/max } ]
}]
});
}
});
}else if(cid == 10){
}else if(nid=='10'&&cid == '10'){
// 管道图
getAjax(baseurl+'/service/sensor?id='+sensor_id,function(res){
if( isOK(res) ){

7
lpro/src/main/webapp/page/visual/show.html

@ -19,8 +19,8 @@
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=q5uqiBY29eEu0wNIAPoCXwq1HvUmDzqP"></script>
<!-- 视频播放 -->
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript" src="../../lib/mqtt/mqtt.min.js"></script>
<script type="text/javascript" src="js/show.js"></script>
@ -193,7 +193,7 @@
}
client = mqtt.connect('ws://'+document.domain+':8083/mqtt', options) ;
client.on('reconnect', function(error) {
console.log("mqtt 链接成功!");
console.log("reconnect");
})
client.on('error', function(error) {
console.log('连接失败:', error)
@ -202,7 +202,6 @@
if( message.toString() == '1' ){
if( that.lastTime + 2*1000 < new Date().getTime() ){
that.lastTime = new Date().getTime() ;
udpChartValue();
initSensorData();
initControlNode();

Loading…
Cancel
Save