lxc
/
Iot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加仪表盘组件

master
谕仙 2 years ago
parent
23b787031e
commit
3d881181b2
2 changed files with 162 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      lpro/src/main/webapp/page/visual/index.html
  2. 53
      lpro/src/main/webapp/page/visual/js/cfg.js

145
lpro/src/main/webapp/page/visual/index.html
View File

@ -371,6 +371,23 @@
</div> </div>
</div> </div>
</div> </div>
<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>
</div>
<div class="intro-txt">
仪表盘
</div>
</div>
<div class="ele-content">
<div class="canvas pipeLineNode" nid="5" cid="3" >
<div class="chartStyle"></div>
</div>
</div>
</div>
</div> </div>
<!-- 图库 --> <!-- 图库 -->
<div class="element-container imglibrary self-upload" v-show="tabmode==2"> <div class="element-container imglibrary self-upload" v-show="tabmode==2">
@ -866,7 +883,43 @@
<input class="slide_size" v-model="rotate_speed" @input="rotateSpeedChange" > <input class="slide_size" v-model="rotate_speed" @input="rotateSpeedChange" >
</div> </div>
</div> </div>
<div v-show="editType>=0 && editType <= 11 && editType!= 7">
<div class="tool-title " style="padding: 10px;">大小</div>
<div style="padding: 0 10px;">
<span style="padding-right: 5px;">宽</span>
<input class="input-style" v-model="canswidth" @input="canswidthChange" style="margin-right: 15px;">
<span style="padding-right: 5px;">高</span>
<input class="input-style" v-model="cansheight" @input="cansheightChange">
</div>
</div>
<div v-show="editType>=0 && editType <= 11 && editType!= 7">
<div class="tool-title " style="padding: 10px;">位置</div>
<div style="padding: 0 10px;">
<span style="padding-right: 5px;">X&nbsp;</span>
<input class="input-style" v-model="canvensx" @input="canvensxChange" style="margin-right: 15px;">
<span style="padding-right: 5px;">Y&nbsp;</span>
<input class="input-style" v-model="canvensy" @input="canvensyChange">
</div>
</div>
<div v-show="editType == 2 || editType == 9 || editType == 8 || editType == 11 " >
<div class="tool-title " style="padding: 10px;">图片显示</div>
<div style="padding: 0 10px;">
<button @click="imgScale(0)" class="el-button el-button--small el-button--primary" >原比例</button>
<button @click="imgScale(1)" class="el-button el-button--small el-button--primary" >缩放</button>
</div>
</div>
<div class="functionDetails" v-if="propertyModuleName.length>0">
<br/>
<span>
{{propertyModuleName}}
</span>
</div>
<!--@新增 isDisableAnimation属性对应元素--> <!--@新增 isDisableAnimation属性对应元素-->
<!-- 液位图属性 -->
<div v-show="editType == 5 && cid == 4 "> <div v-show="editType == 5 && cid == 4 ">
<div style="padding: 10px;"> <div style="padding: 10px;">
<input v-model="isDisableAnimation" type="checkbox" @change="setLiquidFillAnimation"> <input v-model="isDisableAnimation" type="checkbox" @change="setLiquidFillAnimation">
@ -893,46 +946,58 @@
</div> </div>
<div v-show="editType == 5 && cid == 4 "> <div v-show="editType == 5 && cid == 4 ">
<div class="tool-title " style="padding: 10px;">液位最大值</div> <div class="tool-title " style="padding: 10px;">液位最大值</div>
<div style="padding-left: 10px;"> <div style="padding-left: 10px;">
<input class="el-input__inner" v-model="chartMax" placeholder="液位最大值" style="width:75%;" @input="chartMaxInput"> <input class="el-input__inner" v-model="chartMax" placeholder="液位最大值" style="width:75%;" @input="chartMaxInput">
</div> </div>
</div> </div>
<div v-show="editType == 5 && cid == 4 "> <div v-show="editType == 5 && cid == 4 ">
<div class="tool-title " style="padding: 10px;">边框</div> <div class="tool-title " style="padding: 10px;">边框</div>
<div style="padding-left: 10px;"> <div style="padding-left: 10px;">
<select class="el-input__inner" v-model="columnVal" @change="changeChartColumn" style="width:75%;"> <select class="el-input__inner" v-model="columnVal" @change="changeChartColumn" style="width:75%;">
<option selected="selected" value="0">无边框</option> <option selected="selected" value="0">无边框</option>
<option value="1">有边框</option> <option value="1">有边框</option>
</select> </select>
</div> </div>
</div> </div>
<div v-show="editType>=0 && editType <= 11 && editType!= 7"> <!-- 仪表盘属性 -->
<div class="tool-title " style="padding: 10px;">大小</div> <!-- 仪表盘结束与开始角度 -->
<div style="padding: 0 10px;"> <div v-show="editType == 5 && cid == 3 ">
<span style="padding-right: 5px;">宽</span> <div class="tool-title " style="padding: 10px;">仪表盘形状</div>
<input class="input-style" v-model="canswidth" @input="canswidthChange" style="margin-right: 15px;"> <div style="padding-left: 10px;">
<span style="padding-right: 5px;">高</span> <el-slider
<input class="input-style" v-model="cansheight" @input="cansheightChange"> v-model="piRect"
</div> range
show-stops
:max="360"
:min="-360"
style="width:75%;"
@change="changePiRect"
>
</el-slider>
</div>
</div> </div>
<div v-show="editType>=0 && editType <= 11 && editType!= 7"> <!-- 仪表盘刻度最大值 -->
<div class="tool-title " style="padding: 10px;">位置</div> <div v-show="editType == 5 && cid == 3 ">
<div style="padding: 0 10px;"> <div class="tool-title " style="padding: 10px;">仪表盘刻度最大值</div>
<span style="padding-right: 5px;">X&nbsp;</span> <div style="padding-left: 10px;">
<input class="input-style" v-model="canvensx" @input="canvensxChange" style="margin-right: 15px;"> <input class="el-input__inner" v-model="pimax" placeholder="刻度最大值" style="width:75%;" @blur="changePiMax">
<span style="padding-right: 5px;">Y&nbsp;</span> </div>
<input class="input-style" v-model="canvensy" @input="canvensyChange">
</div>
</div> </div>
<!-- 仪表盘刻度分段 -->
<div v-show="editType == 2 || editType == 9 || editType == 8 || editType == 11 " > <div v-show="editType == 5 && cid == 3 ">
<div class="tool-title " style="padding: 10px;">图片显示</div> <div class="tool-title " style="padding: 10px;">仪表盘刻度分段数</div>
<div style="padding: 0 10px;"> <div style="padding-left: 10px;">
<button @click="imgScale(0)" class="el-button el-button--small el-button--primary" >原比例</button> <input class="el-input__inner" v-model="splitNumber" placeholder="刻度最大值" style="width:75%;" @blur="changeSplitNumber">
<button @click="imgScale(1)" class="el-button el-button--small el-button--primary" >缩放</button> </div>
</div>
</div> </div>
<!-- 仪表盘刻度单位 -->
<div v-show="editType == 5 && cid == 3 ">
<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">
</div>
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据绑定" name="second"> <el-tab-pane label="数据绑定" name="second">
@ -1320,12 +1385,16 @@
imgObjList:'' , // 组件图片列表 imgObjList:'' , // 组件图片列表
chartMax: 1000 , // 图标最大值 chartMax: 1000 , // 图标最大值
columnVal: '0' , // 栏目值 columnVal: '0' , // 栏目值
pimax: '' , // 仪表盘最大值
visual_name : '' , // 组态名称 visual_name : '' , // 组态名称
addColumn: false , addColumn: false ,
propertyModuleName:'',// 属性模块 分组名称
pimax:100, // 仪表盘最大值
visual_select_code: '' , // 组态内跳转 visual_select_code: '' , // 组态内跳转
isDisableAnimation:false, // 是否禁用动画 @新增属性 isDisableAnimation:false, // 是否禁用动画 @新增属性
shape:"container", // 形状 @新增属性 shape:"container", // 形状 @新增属性
piRect:[225,-45],// 仪表盘区间
splitNumber:10, // 刻度分段数
piCompany:'' //刻度单位
}; };
}, },
methods:{ methods:{
@ -1872,6 +1941,24 @@
cl.attr('border',this.columnVal ); cl.attr('border',this.columnVal );
// 更新echart数据 // 更新echart数据
setChartOption( getEchartObj() ,optnj) ; setChartOption( getEchartObj() ,optnj) ;
},
// 修改仪表盘开始和结束角度
changePiRect(value){
var obj={startAngle:value[0],endAngle:value[1]};
changeChartOption(obj);
},
// 修改仪表盘刻度最大值
changePiMax(){
changeChartOption1("max",this.pimax);
},
// 修改仪表盘刻度分段
changeSplitNumber(){
changeChartOption1("splitNumber",this.splitNumber);
},
// 修改仪表盘刻度单位
changePiCompany(){
var formatter={axisLabel:{formatter:"{value}"+this.piCompany}};
changeChartOption(formatter);
} }
},created(){ },created(){

53
lpro/src/main/webapp/page/visual/js/cfg.js
View File

@ -39,6 +39,7 @@
* @修订方法 * @修订方法
* initSensorLiquidChart 初始化传感器液位图 * initSensorLiquidChart 初始化传感器液位图
* updateEditDate 编辑元素回显 液位图新增回显属性 * updateEditDate 编辑元素回显 液位图新增回显属性
* initTemplateCharts 增加仪表盘的创建代码 更改仪表盘样式
* */ * */
var navPage = ".edit-container"; //画布 var navPage = ".edit-container"; //画布
// 组态方法类 // 组态方法类
@ -324,6 +325,7 @@ var cfg = {
app.cid = obj.attr("cid"); // 子类型 app.cid = obj.attr("cid"); // 子类型
var id = obj.attr("id"); var id = obj.attr("id");
app.nid = nid ; app.nid = nid ;
app.propertyModuleName="";
// 类型 // 类型
app.editType = nid ; app.editType = nid ;
switch (nid) { switch (nid) {
@ -345,6 +347,12 @@ var cfg = {
app.columnVal = obj.attr("border") ; app.columnVal = obj.attr("border") ;
app.shape = obj.attr("shape") ; app.shape = obj.attr("shape") ;
app.isDisableAnimation = obj.attr("enableAnimation")==="true"?false:true; app.isDisableAnimation = obj.attr("enableAnimation")==="true"?false:true;
if(app.cid=="4"){
app.propertyModuleName="液位图设置";
}else if(app.cid=="3"){
app.propertyModuleName="仪表盘设置";
}
break ; break ;
case '8': case '8':
case '9': case '9':
@ -714,7 +722,11 @@ function initTemplateCharts(obj){
if(cid==4){ if(cid==4){
initSensorLiquidChart(); initSensorLiquidChart();
return; return;
} } else if(cid==3){
// 仪表盘
initSensorDashChart();
return;
}
//默认折线图 //默认折线图
var chart = obj.find(".chartStyle"); var chart = obj.find(".chartStyle");
chart.attr("id",obj.attr("id")+"_chart") chart.attr("id",obj.attr("id")+"_chart")
@ -746,7 +758,6 @@ function initTemplateCharts(obj){
chart.attr("option",JSON.stringify(option)); chart.attr("option",JSON.stringify(option));
app.chartMap[obj.attr("id")] = myChart; app.chartMap[obj.attr("id")] = myChart;
} }
//初始化传感器折线图 //初始化传感器折线图
function initSensorLineChart(){ function initSensorLineChart(){
var current_edit_obj = cfg.current_edit_obj; var current_edit_obj = cfg.current_edit_obj;
@ -820,18 +831,30 @@ function initSensorDashChart(){
type: 'gauge', type: 'gauge',
radius : "98%", radius : "98%",
axisLine : { axisLine : {
lineStyle : {
width : 20 lineStyle : {
} width : 5,
color :[[1,'#5175B8']]
}
}, },
splitLine : { splitLine : {
length : 20 show:true,
length : 8
}, },
axisTick:{
show:false,
},
roundCap:false,
detail: {formatter: '{value}'}, detail: {formatter: '{value}'},
data: [{ value: 20, name: '传感器'}] data: [{ value: 20, name: '传感器'}]
,progress: {
show: true,
width: 18
},
} }
] ]
} ; } ;
setChartOption(chart,option) ; setChartOption(chart,option) ;
} }
//初始化传感器液位图 //初始化传感器液位图
@ -963,6 +986,22 @@ function updateChartsOption(propertyName,value){
// 更新地图 // 更新地图
chart.setOption(option); chart.setOption(option);
} }
// 修改echart 第一个series属性；示例:
// args: property max
// value 1000
function changeChartOption1(property,value){
var chart = getEchartObj();
option.series[0][property]=value;
chart.setOption(option);
}
// 修改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);
}
//管道图 //管道图
function initSensorPipelineChart(type){ function initSensorPipelineChart(type){
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例

Write Preview
Loading…
Cancel
Save