【发布时间】：2019-07-09 04:31:57
【问题描述】：
我正在设置一个简单的监控解决方案。我使用 DevExtreme Scripts 来渲染仪表。但是，它们没有提供一种本地方式来在仪表中间显示当前值，而这正是我所需要的。我设法在包含仪表的 DIV 内创建了一个 DIV。我已经将容器 DIV 和包含文本的 DIV 都设置为 position:relative 但会影响我不想要的仪表的定位。
我尝试过使用绝对定位，但只能使用一种窗口大小。无论窗口的大小/分辨率如何，我都希望文本位置相对于仪表是相同的。
我不确定哪一段代码是相关的，所以下面是整个 HTML。但是，与仪表容器相关的 CSS 是“sensor1”，与仪表 DIV 中的值相关的文本 CSS 是“rpm-value-base”
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery341.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- DevExtreme themes -->
<link rel="stylesheet" href="css/dx.common.css">
<link rel="stylesheet" href="css/dx.darkmoon.css">
<!-- DevExtreme library -->
<script type="text/javascript" src="js/dx.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
update();
setInterval(update, 5000);
});
</script>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 0%;
background-color: #131820;
}
.wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.box {
background-color: #303c4f;
border-radius: 5px;
padding: 5px;
font-size: 150%;
}
.box .box {
background-color: #303c4f;
}
.fan1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fan2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fan3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fan4 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fandetails {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 10px;
grid-template-rows: 1fr 1fr;
}
.sensor1 {
position: relative;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor2 {
position: relative;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor3 {
position: relative;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor4 {
position: relative;
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor5 {
position: relative;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
}
.rpm-value-base {
position: relative;
color: #ffffff;
font-size: 14px;
text-align: center;
width: 5%;
height: 5%;
left: 45%;
top: 80%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box fan1">
<div id="fan1a" class="box"></div>
<div id="fan1b" class="box"></div>
</div>
<div class="box fan2">
<div id="fan2a" class="box"></div>
<div id="fan2b" class="box"></div>
</div>
<div class="box fan3">
<div id="fan3a" class="box"></div>
<div id="fan3b" class="box"></div>
</div>
<div class="box fan4">
<div id="fan4a" class="box"></div>
<div id="fan4b" class="box"></div>
</div>
<div class="box fandetails">
<div id="fandetailsa" class="box"></div>
<div id="fandetailsb" class="box"></div>
</div>
<div class="box sensor1" id="sensor1id">
<div class="rpm-value-base" id="rpm1-value"></div>
</div>
<div class="box sensor2" id="sensor2id">
</div>
<div class="box sensor3" id="sensor3id">
</div>
<div class="box sensor4" id="sensor4id">
</div>
<div class="box sensor5" id="sensor5id">
</div>
</div>
<script>
$(function() {
var options_fan_speed = {
valueIndicator: {
type: 'triangleMarker',
color: '#ffffff'
},
title: {
font: {
size: 12,
weight: 400,
color: '#ffffff'
}
},
rangeContainer: {
palette: "Pastel",
ranges: [
{ startValue: 0, endValue: 25 },
{ startValue: 25, endValue: 50 },
{ startValue: 50, endValue: 75 },
{ startValue: 75, endValue: 100 }
]
}
};
var options_fan_rpm = {
valueIndicator: {
type: 'triangleMarker',
color: '#ffffff'
},
title: {
font: {
size: 12,
weight: 400,
color: '#ffffff'
}
},
rangeContainer: {
palette: "Pastel",
ranges: [
{ startValue: 0, endValue: 440 },
{ startValue: 440, endValue: 880 },
{ startValue: 880, endValue: 1320 },
{ startValue: 1320, endValue: 1760 },
{ startValue: 1760, endValue: 2200 }
]
}
};
$("#fan1a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 1 Set Speed (%)',
}
}));
$("#fan1b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 1 RPM',
}
}));
$("#fan2a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 2 Set Speed (%)',
}
}));
$("#fan2b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 2 RPM',
}
}));
$("#fan3a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 3 Set Speed (%)',
}
}));
$("#fan3b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 3 RPM',
}
}));
$("#fan4a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 4 Set Speed (%)',
}
}));
$("#fan4b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 4 RPM',
}
}));
var options_sensor = {
scale: {
startValue: -10,
endValue: 40,
tickInterval: 5,
label: {
useRangeColors: true
}
},
rangeContainer: {
palette: "Pastel",
ranges: [
{ startValue: -10, endValue: 0, color: '#779ECB' },
{ startValue: 0, endValue: 10 },
{ startValue: 10, endValue: 20 },
{ startValue: 20, endValue: 25 },
{ startValue: 25, endValue: 40 }
]
},
valueIndicator: {
type: "twoColorNeedle",
color: "#779ECB",
secondColor: "#dddddd"
},
title: {
font: { size: 12 }
}
};
$("#sensor1id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Cab 1"
}
}));
$("#sensor2id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Cab 2"
}
}));
$("#sensor3id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Loft"
}
}));
$("#sensor4id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Outside"
}
}));
$("#sensor5id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Inside"
}
}));
});
</script>
</body>
</html>
图片显示了我如何尝试将仪表值文本覆盖在第一个传感器“cab1”上，该传感器工作但将仪表放置在页面下方。其他仪表显示仪表的预期位置。我已经突出显示了仪表值和由它创建的“空白”。
【问题讨论】：
-
嗨 djmattc.. 请参考stackoverflow.com/help/minimal-reproducible-example