resistance layout, termoprophet layout e varie
This commit is contained in:
@@ -3,12 +3,9 @@
|
||||
@import "colors.less";
|
||||
@import "fonts.less";
|
||||
|
||||
|
||||
|
||||
.warmers {
|
||||
position: relative;
|
||||
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -31,28 +28,34 @@
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
&.disabled{
|
||||
cursor:not-allowed;
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.temp{
|
||||
&.id {
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 50% 50%;
|
||||
grid-template-rows: 70% 30%;
|
||||
display: grid;
|
||||
font-size: 22px;
|
||||
span{
|
||||
text-align: right;
|
||||
margin-right: 5px;
|
||||
font-size: 18px;
|
||||
span {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: -1;
|
||||
text-align: center;
|
||||
}
|
||||
small {
|
||||
grid-row: 2;
|
||||
padding: 0 10px;
|
||||
&:last-of-type {
|
||||
grid-column: 2;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon{
|
||||
.icon {
|
||||
font-size: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4816,15 +4816,24 @@ article .box .body {
|
||||
.warmers svg .resistance.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.warmers svg .resistance.temp {
|
||||
.warmers svg .resistance.id {
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 50% 50%;
|
||||
grid-template-rows: 70% 30%;
|
||||
display: grid;
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.warmers svg .resistance.temp span {
|
||||
.warmers svg .resistance.id span {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: -1;
|
||||
text-align: center;
|
||||
}
|
||||
.warmers svg .resistance.id small {
|
||||
grid-row: 2;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.warmers svg .resistance.id small:last-of-type {
|
||||
grid-column: 2;
|
||||
text-align: right;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.warmers .icon {
|
||||
font-size: 30px;
|
||||
|
||||
+24
-25
@@ -11,16 +11,13 @@ export default class Resistance extends Vue {
|
||||
|
||||
@Prop()
|
||||
channel: Warmers.IChannel;
|
||||
|
||||
|
||||
@Prop({ default: true })
|
||||
editable: boolean;
|
||||
|
||||
@Prop({ default: false })
|
||||
selected: boolean;
|
||||
|
||||
@Prop({ default: false })
|
||||
temperature: boolean;
|
||||
|
||||
@Prop({ default: function () { return [253, 216, 53] } })
|
||||
colorFrom: number[];
|
||||
|
||||
@@ -39,42 +36,44 @@ export default class Resistance extends Vue {
|
||||
@Prop({ default: function () { return [23, 86, 173] } })
|
||||
selectedColorTo: number[];
|
||||
|
||||
click(){
|
||||
if(this.editable)
|
||||
@Prop({ default: 0 })
|
||||
mode: number;
|
||||
|
||||
click() {
|
||||
if (this.editable)
|
||||
this.$emit('click');
|
||||
}
|
||||
|
||||
get currentStandardTempColor() {
|
||||
//Not linear, but quadratic
|
||||
if(!this.channel.tCamActive || this.channel.setpointHMI==0)
|
||||
if (!this.channel.tCamActive || this.channel.setpointHMI == 0)
|
||||
return "179, 179, 179";
|
||||
|
||||
|
||||
if(this.channel.tCamTempAct==0 || this.channel.tCamTempSet==0)
|
||||
|
||||
if (this.channel.tCamTempAct == 0 || this.channel.tCamTempSet == 0)
|
||||
return "144,191,61";
|
||||
|
||||
var delta = this.channel.tCamTempSet - this.channel.tCamTempAct;
|
||||
if(delta >= - 5 && delta <= 5)
|
||||
{
|
||||
if (delta >= - 5 && delta <= 5) {
|
||||
return "144,191,61";
|
||||
}
|
||||
else if(delta>5 && delta<=20){
|
||||
else if (delta > 5 && delta <= 20) {
|
||||
delta = delta - 5;
|
||||
return [this.ColorColdFrom[0] - (this.ColorColdFrom[0] - this.colorColdTo[0]) * delta / 20,
|
||||
this.ColorColdFrom[1] - (this.ColorColdFrom[1] - this.colorColdTo[1]) * delta / 20,
|
||||
this.ColorColdFrom[2] - (this.ColorColdFrom[2] - this.colorColdTo[2]) * delta / 20];
|
||||
}
|
||||
else if(delta>20){
|
||||
else if (delta > 20) {
|
||||
return "23, 86, 173";
|
||||
}
|
||||
else if(delta<-5 && delta>=-20){
|
||||
delta = delta* (-1);
|
||||
else if (delta < -5 && delta >= -20) {
|
||||
delta = delta * (-1);
|
||||
delta = delta - 5;
|
||||
return [this.colorFrom[0] - (this.colorFrom[0] - this.colorTo[0]) * delta / 20,
|
||||
this.colorFrom[1] - (this.colorFrom[1] - this.colorTo[1]) * delta / 20,
|
||||
this.colorFrom[2] - (this.colorFrom[2] - this.colorTo[2]) * delta / 20];
|
||||
}
|
||||
else if(delta<-20){
|
||||
else if (delta < -20) {
|
||||
return "244, 0, 0";
|
||||
}
|
||||
return "179, 179, 179";
|
||||
@@ -84,7 +83,7 @@ export default class Resistance extends Vue {
|
||||
|
||||
get currentStandardColor() {
|
||||
//Not linear, but quadratic
|
||||
var x = 1/100 * this.channel.setpointHMI * this.channel.setpointHMI;
|
||||
var x = 1 / 100 * this.channel.setpointHMI * this.channel.setpointHMI;
|
||||
return [this.colorFrom[0] - (this.colorFrom[0] - this.colorTo[0]) * x / 100,
|
||||
this.colorFrom[1] - (this.colorFrom[1] - this.colorTo[1]) * x / 100,
|
||||
this.colorFrom[2] - (this.colorFrom[2] - this.colorTo[2]) * x / 100];
|
||||
@@ -94,13 +93,13 @@ export default class Resistance extends Vue {
|
||||
if (this.selected) return this.currentSelectedColor;
|
||||
return this.currentStandardColor;
|
||||
}
|
||||
|
||||
|
||||
get currentColorTemp() {
|
||||
if (this.selected) return this.currentSelectedTempColor;
|
||||
return this.currentStandardTempColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
get currentSelectedColor() {
|
||||
|
||||
@@ -116,12 +115,12 @@ export default class Resistance extends Vue {
|
||||
get currentSelectedTempColor() {
|
||||
//Not linear, but quadratic
|
||||
return "0,38,128"
|
||||
/*
|
||||
var x = 1/100 * this.channel.setpointHMI * this.channel.setpointHMI;
|
||||
return [this.selectedColorFrom[0] - (this.selectedColorFrom[0] - this.selectedColorTo[0]) * x / 100,
|
||||
this.selectedColorFrom[1] - (this.selectedColorFrom[1] - this.selectedColorTo[1]) * x / 100,
|
||||
this.selectedColorFrom[2] - (this.selectedColorFrom[2] - this.selectedColorTo[2]) * x / 100];*/
|
||||
/*
|
||||
var x = 1/100 * this.channel.setpointHMI * this.channel.setpointHMI;
|
||||
return [this.selectedColorFrom[0] - (this.selectedColorFrom[0] - this.selectedColorTo[0]) * x / 100,
|
||||
this.selectedColorFrom[1] - (this.selectedColorFrom[1] - this.selectedColorTo[1]) * x / 100,
|
||||
this.selectedColorFrom[2] - (this.selectedColorFrom[2] - this.selectedColorTo[2]) * x / 100];*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
+13
-7
@@ -2,13 +2,21 @@
|
||||
<div
|
||||
class="resistance"
|
||||
:key="selected"
|
||||
v-if="!temperature"
|
||||
v-if="mode == 1"
|
||||
@click="click"
|
||||
v-on:touchend="click"
|
||||
:style="{backgroundColor:`rgb(${currentColor})`}"
|
||||
>{{channel.setpointHMI}} %</div>
|
||||
<div
|
||||
class="resistance temp"
|
||||
class="resistance"
|
||||
:key="selected"
|
||||
v-else-if="mode == 0"
|
||||
@click="click"
|
||||
v-on:touchend="click"
|
||||
:style="{backgroundColor:`rgb(${currentColor})`}"
|
||||
>{{channel.tCamTempSet}} °C</div>
|
||||
<div
|
||||
class="resistance id"
|
||||
:class="{'disabled':!editable}"
|
||||
:key="selected"
|
||||
@click="click"
|
||||
@@ -16,11 +24,9 @@
|
||||
v-else
|
||||
:style="{backgroundColor:`rgb(${currentColorTemp})`}"
|
||||
>
|
||||
<span v-if="channel.setpointHMI == 0 || !channel.tCamActive">--</span>
|
||||
<span v-else>{{channel.tCamTempSet}} °C</span>
|
||||
<span>{{channel.tCamTempAct}} °C</span>
|
||||
<span>{{channel.setpointHMI}} %</span>
|
||||
<span>{{channel.setpointPLC}} %</span>
|
||||
<span>ID:</span>
|
||||
<small>Bo:</small>
|
||||
<small>Ch: {{channel.idChannel}}</small>
|
||||
</div>
|
||||
</template>
|
||||
<script src="./resistance.ts" lang="ts"></script>
|
||||
+15
-4
@@ -22,14 +22,25 @@
|
||||
height: 250px;
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
background-image: linear-gradient(to bottom, #1756ad, #002e6e 97%);
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
// box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
background: none !important;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
background-color: linear-gradient(
|
||||
to bottom,
|
||||
#1756ad,
|
||||
#002e6e 97%
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.um-buttons {
|
||||
|
||||
+1
@@ -25,6 +25,7 @@ export default class Thermocamera extends Vue {
|
||||
|
||||
thermoImageUri: string = "/thermoprophet/colored/_last.jpg";
|
||||
thermoImageOpacity: number = 0;
|
||||
resistanceMode = 0;
|
||||
|
||||
@Watch("warmers", { deep: true })
|
||||
async ChangedTemps() {
|
||||
|
||||
+15
-5
@@ -110,22 +110,32 @@
|
||||
@select="selectionChanged"
|
||||
@methodChanged="m => selectionMethod = m"
|
||||
:recipe="recipe"
|
||||
:temperature="true"
|
||||
:resistanceMode="resistanceMode"
|
||||
thermoImage="/thermoprophet/colored/_last.jpg"
|
||||
:thermoImageVisible="!!thermoImageOpacity"
|
||||
:thermoImageVisible="thermocameraModeBTN"
|
||||
:thermoImageOpacity="thermoImageOpacity"
|
||||
></warmers>
|
||||
|
||||
<div class="right-controls">
|
||||
<div class="um-buttons">
|
||||
<button>{{'um-c' | localize('°C')}}</button>
|
||||
<button>{{'um-perc' | localize('%%')}}</button>
|
||||
<button>{{'um-id' | localize('ID')}}</button>
|
||||
<button
|
||||
@click="resistanceMode=0"
|
||||
:class="{selected: resistanceMode ==0}"
|
||||
>{{'um-c' | localize('°C')}}</button>
|
||||
<button
|
||||
@click="resistanceMode=1"
|
||||
:class="{selected: resistanceMode ==1}"
|
||||
>{{'um-perc' | localize('%%')}}</button>
|
||||
<button
|
||||
@click="resistanceMode=2"
|
||||
:class="{selected: resistanceMode ==2}"
|
||||
>{{'um-id' | localize('ID')}}</button>
|
||||
</div>
|
||||
|
||||
<div class="tm-controls">
|
||||
<button class="btn btn-info square"></button>
|
||||
<input
|
||||
:disabled="!thermocameraModeBTN"
|
||||
type="range"
|
||||
orient="vertical"
|
||||
v-model="thermoImageOpacity"
|
||||
|
||||
+4
-5
@@ -32,9 +32,6 @@ export default class Warmers extends Vue {
|
||||
@Prop({ default: true })
|
||||
usePanZoom: boolean;
|
||||
|
||||
@Prop({ default: false })
|
||||
temperature: boolean;
|
||||
|
||||
@Prop({ default: null })
|
||||
thermoImage: string;
|
||||
|
||||
@@ -44,6 +41,9 @@ export default class Warmers extends Vue {
|
||||
@Prop({ default: 0 })
|
||||
thermoImageOpacity: number
|
||||
|
||||
@Prop({ default: 0 })
|
||||
resistanceMode: number
|
||||
|
||||
|
||||
get planSizeX() {
|
||||
return parseFloat(this.parameters.warmerPlanSizeX.toString());
|
||||
@@ -242,8 +242,7 @@ export default class Warmers extends Vue {
|
||||
}
|
||||
|
||||
isdisabled(id) {
|
||||
if (!this.temperature)
|
||||
return false;
|
||||
if (this.resistanceMode != 0) return false;
|
||||
let channel = this.channels.find(c => c.idChannel == id);
|
||||
return channel.setpointHMI == 0;
|
||||
}
|
||||
|
||||
+1
-1
@@ -20,13 +20,13 @@
|
||||
:rx="4"
|
||||
>
|
||||
<resistance
|
||||
:mode="resistanceMode"
|
||||
:res="cell"
|
||||
:channel="getChannel(cell.idChannel)"
|
||||
@mousedown="startSelection"
|
||||
@mouseup="stopSelection"
|
||||
@click="select(cell)"
|
||||
:selected="isSelected(cell.idChannel)"
|
||||
:temperature="temperature"
|
||||
:editable="!isdisabled(cell.idChannel)"
|
||||
/>
|
||||
</foreignObject>
|
||||
|
||||
Reference in New Issue
Block a user