Browse Source

添加仪表盘组件

master
谕仙 2 years ago
parent
commit
3d881181b2
  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

@ -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

@ -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实例

Loading…
Cancel
Save