feat : 传感器区域新增显示范围
This commit is contained in:
@@ -250,7 +250,7 @@ const changeData = (item) => {
|
|||||||
equipmentId: item.equipmentId,
|
equipmentId: item.equipmentId,
|
||||||
icon: changeIcon(item.equipmentType),
|
icon: changeIcon(item.equipmentType),
|
||||||
name: item.equipmentName.slice(0, 2),
|
name: item.equipmentName.slice(0, 2),
|
||||||
max: 120,
|
max: item.maxRange,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
point: item.valueThreshold,
|
point: item.valueThreshold,
|
||||||
unit: item.unit
|
unit: item.unit
|
||||||
@@ -447,7 +447,7 @@ const initChart = (type, values,top) => {
|
|||||||
|
|
||||||
.input-fan {
|
.input-fan {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
padding-right: 20px;
|
||||||
&:hover {
|
&:hover {
|
||||||
//width: 230px;
|
//width: 230px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
@@ -471,8 +471,9 @@ const initChart = (type, values,top) => {
|
|||||||
|
|
||||||
.input-fan {
|
.input-fan {
|
||||||
//margin: 0 26px;
|
//margin: 0 26px;
|
||||||
|
padding-right: 20px;
|
||||||
&:hover {
|
&:hover {
|
||||||
width: 230px;
|
//width: 230px;
|
||||||
background: #2E5589;
|
background: #2E5589;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -110,8 +110,8 @@ const setValue = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 422px;
|
width: 468px;
|
||||||
height: 24px;
|
height: 25px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid #0f82af;
|
border: 1px solid #0f82af;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -138,7 +138,7 @@ const setValue = () => {
|
|||||||
|
|
||||||
.value-num {
|
.value-num {
|
||||||
height: 37px;
|
height: 37px;
|
||||||
width: 160px;
|
//width: 160px;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-family: MicrosoftYaHei;
|
font-family: MicrosoftYaHei;
|
||||||
color: #d6f1fa;
|
color: #d6f1fa;
|
||||||
|
|||||||
@@ -201,7 +201,7 @@ const changeData = (item) => {
|
|||||||
return {
|
return {
|
||||||
equipmentId: item.equipmentId,
|
equipmentId: item.equipmentId,
|
||||||
name: item.equipmentName.slice(0, item.equipmentName.length - 2),
|
name: item.equipmentName.slice(0, item.equipmentName.length - 2),
|
||||||
max: 120,
|
max: item.maxRange,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
point: item.valueThreshold,
|
point: item.valueThreshold,
|
||||||
unit: item.unit,
|
unit: item.unit,
|
||||||
|
|||||||
@@ -418,7 +418,7 @@ const getTransData = (data) => {
|
|||||||
data?.map(item => {
|
data?.map(item => {
|
||||||
tranObj = {
|
tranObj = {
|
||||||
equipmentId: item.equipmentId,
|
equipmentId: item.equipmentId,
|
||||||
max: 800,
|
max: 600,
|
||||||
valueA: item.phaseCurrentA,
|
valueA: item.phaseCurrentA,
|
||||||
pointA: item.phaseCurrentAThreshold,
|
pointA: item.phaseCurrentAThreshold,
|
||||||
valueB: item.phaseCurrentB,
|
valueB: item.phaseCurrentB,
|
||||||
@@ -796,7 +796,7 @@ input[type="number"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep( .el-radio__label) {
|
:deep( .el-radio__label) {
|
||||||
font-size: 28px;
|
font-size: 30px;
|
||||||
color: #38cafb;
|
color: #38cafb;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
}
|
}
|
||||||
@@ -928,7 +928,7 @@ input[type="number"] {
|
|||||||
.fan-name {
|
.fan-name {
|
||||||
width: 39px;
|
width: 39px;
|
||||||
height: 140px;
|
height: 140px;
|
||||||
font-size: 26px;
|
font-size: 29px;
|
||||||
color: #38cafb;
|
color: #38cafb;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -946,7 +946,7 @@ input[type="number"] {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 28px;
|
font-size: 29px;
|
||||||
color: #38cafb;
|
color: #38cafb;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
@@ -959,7 +959,7 @@ input[type="number"] {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
margin-right: 15px;
|
//margin-right: 15px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #3eab3f;
|
background-color: #3eab3f;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
@@ -1004,9 +1004,9 @@ input[type="number"] {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
//padding: 0 20px;
|
//padding: 0 20px;
|
||||||
font-size: 28px;
|
font-size: 29px;
|
||||||
color: #38cafb;
|
color: #38cafb;
|
||||||
line-height: 37px;
|
line-height: 43px;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
|
|
||||||
.check-box {
|
.check-box {
|
||||||
@@ -1096,7 +1096,7 @@ input[type="number"] {
|
|||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
margin-left: 26px;
|
margin-left: 26px;
|
||||||
//height: 37px;
|
//height: 37px;
|
||||||
font-size: 28px;
|
font-size: 29px;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
|||||||
@@ -210,7 +210,7 @@ const getScreenInfo = (now) => {
|
|||||||
windPressureObj = {
|
windPressureObj = {
|
||||||
equipmentId: item.equipmentId,
|
equipmentId: item.equipmentId,
|
||||||
equipmentName: item.equipmentName,
|
equipmentName: item.equipmentName,
|
||||||
max: 120,
|
max: item.maxRange,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
point: item.valueThreshold,
|
point: item.valueThreshold,
|
||||||
unit: item.unit
|
unit: item.unit
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="wind-pressure-item" :class="{ abnormal:isWaring }">
|
<div id="wind-pressure-item" :class="{ abnormal:isWaring }">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<img src="../../../../assets/images/windPressure/icon.png" alt=""/>
|
<img src="@/assets/images/windPressure/icon.png" alt=""/>
|
||||||
<span>{{params.wp.equipmentName}}</span>
|
<span>{{params.wp.equipmentName}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="container" ref="length">
|
<div class="container" ref="length">
|
||||||
@@ -27,17 +27,15 @@ const params = defineProps({
|
|||||||
const length = ref(null);
|
const length = ref(null);
|
||||||
const value = ref(null);
|
const value = ref(null);
|
||||||
const point = ref(null);
|
const point = ref(null);
|
||||||
onMounted(handleOnMounted);
|
onMounted(()=>{
|
||||||
|
|
||||||
function handleOnMounted() {
|
|
||||||
setValue();
|
setValue();
|
||||||
}
|
});
|
||||||
|
|
||||||
watch(() => params.wp.value, () => {
|
watch(() => params.wp.value, () => {
|
||||||
setValue();
|
setValue();
|
||||||
});
|
});
|
||||||
|
|
||||||
function setValue() {
|
const setValue=()=> {
|
||||||
let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
|
let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
|
||||||
value.value.style.width = `${width}px`;
|
value.value.style.width = `${width}px`;
|
||||||
let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
|
let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
|
||||||
@@ -107,7 +105,7 @@ let isWaring = computed(() => {
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 24px;
|
height: 25px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid #0f82af;
|
border: 1px solid #0f82af;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
Reference in New Issue
Block a user